创建和插入DOM节点

2022-02-14 23:01:59 阅读：141 来源： 互联网

标签：DOM list js 插入 getElementById let document 节点

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);
</script>

效果：

创建一个新的标签，实现插入

<script>
    let js = document.getElementById('js'); // 已经存在的节点
    let list = document.getElementById('list');
    // 通过JS 创建一个新的节点
    let newP = document.createElement('p');    // 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello, test';
    // 创建一个标签节点 （通过这个属性，可以设置任意的值）
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript')

    // 可以创建一个style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';  // 设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    // 要包含的节点：insertBefore(newNode, targetNode)
    list.insertBefore(js, ee);

标签：DOM,list,js,插入,getElementById,let,document,节点
来源： https://www.cnblogs.com/wshjyyysys/p/15894550.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

创建和插入DOM节点