首页 > 网络编程 > JavaScript > javascript技巧 > js添加元素

js添加元素的简单方式示例

2023-10-12 09:39:01 作者：Ther19

这篇文章主要给大家介绍了关于js添加元素的简单方式,文中通过代码示例将每种实现的方法都介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下

一、添加单个标签元素

1.createElement()创建元素、appendChild()添加元素

var box=document.getElementsByClassName("box");
var div=document.createElement("div");
box.appendChild(div);

2.insertAdjacentElement()

var box = document.getElementsByClassName("box")
var div = document.createElement("div");
box.insertAdjacentElement("beforeend", div);

beforebegin：插在元素自身的前面
afterbegin：插在元素内部最前面
beforeend：插在元素内部最后面
afterend：插在元素自身的后面

二、添加多个标签元素及内容

1.insertAdjacentHTML()

var box=document.getElementsByClassName("box");
var div="<div>内容<img></div>";
box.insertAdjacentHTML("beforeed",div);

beforebegin：插在元素自身的前面
afterbegin：插在元素内部最前面
beforeend：插在元素内部最后面
afterend：插在元素自身的后面

2.innerHTML

var box=document.getElemntsClassName("box");
box.innerHTML="<div>内容<img></div>";

3.innerText和innerHTML区别

innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签

补充：JS 追加元素的方法总结

方法一创建节点，追加

<body>
    <input type="text" placeholder="请输入信息">
    <button class="one">添加</button>
    <button>删除</button>
    <ul></ul>
</body>
</html>
<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    oBtn[0].onclick = function () {
        // 给父元素追加li
        if (oBinput.value != '') { //判断文本不为空时追加
            let oLi = document.createElement('li') 
            oLi.innerHTML = oBinput.value
            oUl.appendChild(oLi)
            oBinput.value = ''
        }
    }
    </script>

方法二拼接字符串

<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    let str = ''
    oBtn[0].onclick = function () {
        str += `    <li>${oBinput.value}</li>
  `
        oBinput.value = ''
        oUl.innerHTML = str
             }
    </script>

方法三利用insertBefore

功能:按照指定位置添加子元素,将目标元素添加至参照元素之前

用法：父元素.insertBefore(目标元素,参照元素)

//body内容同上
<script>
    let oBtn = document.querySelectorAll('button')
    let oBinput = document.body.firstElementChild
    let oUl = oBtn[1].nextElementSibling
    oBtn[0].onclick = function () {
          if (oBinput.value != '') {
            let oLi = document.createElement('li')
            oLi.innerHTML = oBinput.value //赋值
            oUl.insertBefore(oLi, oUl.lastElementChild)
            oBinput.value = ''
        } 
        }
    </script>

总结

到此这篇关于js添加元素的文章就介绍到这了,更多相关js添加元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！