快捷導(dǎo)航

js添加元素的簡(jiǎn)單方式示例

更新時(shí)間：2023年10月12日 09:40:57 作者：Ther19

這篇文章主要給大家介紹了關(guān)于js添加元素的簡(jiǎn)單方式,文中通過(guò)代碼示例將每種實(shí)現(xiàn)的方法都介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、添加單個(gè)標(biāo)簽元素

1.createElement()創(chuàng)建元素、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：插在元素內(nèi)部最前面
beforeend：插在元素內(nèi)部最后面
afterend：插在元素自身的后面

二、添加多個(gè)標(biāo)簽元素及內(nèi)容

1.insertAdjacentHTML()

var box=document.getElementsByClassName("box");
var div="<div>內(nèi)容<img></div>";
box.insertAdjacentHTML("beforeed",div);

beforebegin：插在元素自身的前面
afterbegin：插在元素內(nèi)部最前面
beforeend：插在元素內(nèi)部最后面
afterend：插在元素自身的后面

2.innerHTML

var box=document.getElemntsClassName("box");
box.innerHTML="<div>內(nèi)容<img></div>";

3.innerText和innerHTML區(qū)別

innerHTML可以輸出標(biāo)簽以及內(nèi)容，innerText只能輸出內(nèi)容不能輸出標(biāo)簽

補(bǔ)充：JS 追加元素的方法總結(jié)

方法一創(chuàng)建節(jié)點(diǎn)，追加

<body>
    <input type="text" placeholder="請(qǐng)輸入信息">
    <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 != '') { //判斷文本不為空時(shí)追加
            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

功能:按照指定位置添加子元素,將目標(biāo)元素添加至參照元素之前

用法：父元素.insertBefore(目標(biāo)元素,參照元素)

//body內(nèi)容同上
<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>