JS小技巧之通過字符串追加元素
更新時間：2023年01月14日 17:14:11 作者：一只卑微的菜狗
這篇文章主要介紹了JS小技巧之通過字符串追加元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
JS通過字符串追加元素
原生JS中通過動態(tài)的創(chuàng)建createElement，但是元素里面內容較多，需要innerHTML賦值，在appendChild追加到父元素里面。
如下代碼：
// 動態(tài)添加對象
// 1. 創(chuàng)建元素
var li = document.createElement('li');
// 2. 添加節(jié)點
li.innerHTML = text.value;
?
// 3.1 將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾
ul.appendChild(li);
?
// 3.2 將一個節(jié)點添加到父節(jié)點的指定子節(jié)點前面
ul.insertBefore(li, ul.children[0]);現在，高級的做法是利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中。
// 這里的ul是父節(jié)點
var li = '<li class="liactive"><span>測試</span></li>';
ul.insertAdjacentHTML('beforeend', li);
?
// 第一個參數是插入的位置，該參數有以下四個值：
// beforebegin：插入到元素自身的前面
// afterbegin：插入元素內部的第一個子節(jié)點之前
// beforeend：插入元素內部的最后一個子節(jié)點之后
// afterend：插入到元素自身的后面如appendChild的方法與insertAdjacentHTML()方法之間的區(qū)別在于：前者不支持追加字符串的子元素，后者支持
JS追加字符串的奇怪問題
遇到一個奇怪的問題，JS在向一個table追加一行信息的時候tr,td元素全部被過濾掉了
打印出來的原始字符串如下圖：
追加以后的結構如下圖：
出現這個問題的主要原因就在于那個隱藏域上，也就是tr之后多了其它的元素就會出現這個問題，但至于為什么會這樣，可能是自己技術沒到家哈，理解的不夠，不知道怎么回事
解決很簡單
把隱藏域放到td里面去就沒有問題了，原理就不知道了，記一下，僅防以后再犯此類錯誤
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript自定義事件功能與用法,結合實例形式較為詳細的分析了javascript自定義事件的原理、功能、應用與相關注意事項,需要的朋友可以參考下2017-11-11
本文給大家介紹uniapp實現單選框的示例代碼,采用uniapp-vue3實現的一款單選框組件,提供絲滑的動畫選中效果,支持不同主題配置,適配web、H5、微信小程序,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了js實現改進的仿藍色論壇導航菜單效果代碼,涉及JavaScript頁面元素的遍歷及樣式動態(tài)變換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了JS使用單鏈表統(tǒng)計英語單詞出現次數的相關資料，列出所有單詞及其出現次數，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要給大家介紹了關于微信小程序如何獲取圖片寬度與高度的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了JavaScript實現左右滾動電影畫布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了帶領大家學習javascript基礎篇(一)之基本概念的相關資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了electron 如何將任意資源打包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了JavaScript實現10秒后再次獲取驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文給大家分享的是javascript通過setTimeout實現延時顯示提示框的特效代碼，效果非常棒，這里推薦給大家2016-04-04