JS 於div容器中新增加內容,而不會覆蓋到原有的內容的方法 insertAdjacentHTML();
1、範例說明欲將此段內容<div>新增加內容</div>
加到<div id="testjs"><h3>現有內容</h3></div>裡面,但又不要覆蓋原本的內容。
加到<div id="testjs"><h3>現有內容</h3></div>裡面,但又不要覆蓋原本的內容。
2、JS部分
<script type="text/javascript">
var byId = document.getElementById("testjs");
byId.insertAdjacentHTML("afterBegin","<div>新增加內容</div>");
</script>
紅字afterBegin為設定新內容加入的方式。
其編譯之後=
<div id="testjs"><div>新增加內容</div><h3>現有內容</h3></div>
加入元件方式共有4種參數可以選擇
afterBegin於div內,內容之前加入新增加內容
beforeEnd於div內,內容之後加入新增加內容
beforeBegin於div外,內容之前加入新增加內容
afterEnd於div外,內容之後加入新增加內容
var byId = document.getElementById("testjs");
byId.insertAdjacentHTML("afterBegin","<div>新增加內容</div>");
</script>
紅字afterBegin為設定新內容加入的方式。
其編譯之後=
<div id="testjs"><div>新增加內容</div><h3>現有內容</h3></div>
加入元件方式共有4種參數可以選擇
afterBegin於div內,內容之前加入新增加內容
beforeEnd於div內,內容之後加入新增加內容
beforeBegin於div外,內容之前加入新增加內容
afterEnd於div外,內容之後加入新增加內容
教學撰寫:徐嘉裕Neohsu
留言
張貼留言