编程技术文章分享与教程

网站首页 > 技术文章 正文

原生Javasript添加dom元素的常用几种方式

hmc789 2024-11-17 11:22:42 技术文章 2 ℃

1、通过innerHTML方法添加子元素，添加的子元素会覆盖原来所有的子元素。

 <div id="wrap-con">
        <input type="text" />
        <input type="number" />
        <div class="form-item">1</div>
        <div class="form-item">2</div>
</div>
const wrapDom = document.getElementById("wrap-con");
wrapDom.innerHTML = `<div id='inner_html_add_child'>inner_html_add_child</div>`;
// 结果
/*
<div id="wrap-con">
   <div id="inner_html_add_child">inner_html_add_child</div>
</div>
*/

注意：innerText用法和innerHTMl一样，但innerText只能添加文本元素。

2、通过appendChild添加子元素，不会覆盖原有的子元素，只在原有的子元素的后面添加。

<script>
      const wrapDom = document.getElementById("wrap-con");
      const div = document.createElement("div");
      div.setAttribute("id", "append_add_child");
      console.log(div);
      div.innerHTML = "append";
      wrapDom.appendChild(div);
   </script> 

// 结果
/* 
<div id="wrap-con">
        <input type="text"/>
        <input type="number"/>
        <div class="form-item">1</div>
        <div class="form-item">2</div>
			<div id="inner_html_add_child">append</div>
</div>
*/

3、通过document.write方法，点击元素执行函数会直接覆盖body内的内容，javascript加载时就执行，只在body子元素最后添加。

const wrapDom = document.getElementById("wrap-con");
wrapDom.onclick = function () {
        document.write("<div>write</div>")
};
// 结果
//<body><div>write</div></body>

4、通过insertBefore在某个元素前面添加元素。

const wrapDom = document.getElementById("wrap-con");
const lastDom = document.getElementsByClassName("form-item")[0];
const div = document.createElement("div");
div.innerText = "insert-before";
wrapDom.insertBefore(div, lastDom);
/*
<div id="wrap-con">
        <input type="text">
        <input type="number">
        <div>insert-before</div>
        <div class="form-item">1</div>
        <div class="form-item">2</div>
</div>
*/

Tags：

猜你喜欢

标签列表
最新留言