GVKun编程网logo

“ innerHTML + =…”与“ appendChild（txtNode）”（appendchild和innerhtml）

19

本文将分享“innerHTML+=…”与“appendChild的详细内容，并且还将对txtNode”进行详尽解释，此外，我们还将为大家带来关于169.标签内容追加innerHTML与append、a

本文将分享“ innerHTML + =…”与“ appendChild的详细内容，并且还将对txtNode”进行详尽解释，此外，我们还将为大家带来关于169. 标签内容追加 innerHTML 与 append、append()、appendChild() 和 innerHTML 的区别、appendChild、appendChild append innerHTML createElement createTextNode分析的相关知识，希望对你有所帮助。

本文目录一览：

“ innerHTML + =…”与“ appendChild（txtNode）”（appendchild和innerhtml）

“ innerHTML + =…”与“ appendChild（txtNode）”（appendchild和innerhtml）

问题是，比较使用innerHTML的隐含条件并将文本节点附加到现有节点。幕后发生了什么？

到目前为止，我对此的想法是：

  • 我猜都是在引起“ ReFlow”。
  • 据我所知，后者（附加一个文本节点）也会导致DOM的完全重建（正确？他们都在这样做吗？）。
  • 前者似乎还有其他讨厌的副作用，例如导致先前保存的对子节点的引用指向我正在修改innerHTML的节点，不再指向“当前DOM” /“子节点的正确版本”。相反，在附加子代时，引用似乎保持不变。为什么是这样？

希望大家能帮我解决这个问题，谢谢！

答案1

小编典典

后者（appendChild）不 不 使DOM的完整重建或甚至所有目标内的元件/节点。

前者（设置innerHTML）的确会完全重建目标元素的内容，如果要附加，则不需要重新构建。

附加通过innerHTML +=content可使浏览器遍历元素中的所有节点，从而构建HTML字符串以提供给JavaScript层。然后，您的代码将文本附加到其上并进行设置innerHTML，导致浏览器将所有旧节点拖放到目标中，重新解析所有HTML，并构建新节点。因此从这个意义上讲，它可能不是有效的。（但是，解析HTML是
浏览器的工作， 而且 浏览 速度非常快。）

设置innerHTML确实会使您可能拥有的目标元素中对元素的任何引用无效-
因为这些元素已不存在，因此在设置时删除了它们，然后放入了新元素（看起来很相似）innerHTML。

简而言之，如果您要 追加
，我会使用appendChild（或insertAdjacentHTML，请参见下文）。如果要替换，则在非常有效的情况下，使用innerHTML方法比通过DOM
API自己创建树更好（在这些方法中，速度是首要的）。

最后，值得一提的是insertAdjacentHTML，该函数可用于使用HTML字符串将节点和元素插入到元素中或元素旁边。您可以将其附加到元素上：theElement.insertAdjacentHTML("beforeend","the HTML goeshere");第一个参数是放置HTML的位置；第二个参数是放置HTML的位置。您的选择是"beforebegin"（元素外部，在元素前面），"afterbegin"（元素内部，在开头），"beforeend"（元素内部，在结尾）和"afterend"（元素外部，在元素之后）。请注意，"afterbegin"并"beforeend"插入到元素本身，而"beforebegin"并"afterend"插入到元素的
父 。我不知道所有主流桌面浏览器都支持该设备有多么出色的移动支持（尽管我确信至少iOS Safari和Android
2.x及更高版本具有此功能），但是垫片很小。

169. 标签内容追加 innerHTML 与 append

169. 标签内容追加 innerHTML 与 append

1.  效果

1.1 使用$("#tipId").html("内容") 与 document.getElementById("loginId").innerHTML="内容"

1.1.1   $("#tipId").html("内容")  （原来下写错了  现在的是修改过的  可用）

 

    //8. 双击事件 修改用户信息
        function dblclickToChangeEmployeeInfo(id){
            //双击   查看该员工详细信息
            //产生随机数 去欺骗浏览器
            var random=Math.floor(Math.random()*100) ;//产生一个1--100的随机数
            var number = new Date().getSeconds()%43 +random; //这将产生一个基于目前时间的0到42的整数。
               var url="${pageContext.request.contextPath }/queryEmployeeByIdToModelView.action";    
            //var data="";//无参数的写法
            var data={"employeeId":id,"number":number}//多参数 用逗号隔开
            $.post(url,data,function(result){
                    //将 ajax 返回的数据填充 到model页面
                
                
                  $("#loginId").innerHTML=result.loginid;//登录的账号  无法将值 追加进去的
                 // 调用模态页面
                 $(''#myModalAbnormalDataId'').modal();
                 $(document).ready(function () {
                     $("#select").bind("change",function(){
                         if($(this).val()==0){
                             return;
                         }
                         else{
                             $("p").text($(this).val());
                         }
                     });
                 });
                 //选择触发事件
                function goUrl(obj){
                    location.href=obj.value;
                }
                   
                
            },"json");
            
              
        };

 

 

1.1.2  document.getElementById("loginId").innerHTML="内容"

效果：可以实现

代码：上面是完整的这里就写核心代码

 document.getElementById("loginId").innerHTML=result.loginid;//登录的账号   追加到li标签下   使用js  能实现

 

1.2  $("#userNameId").append(result.username); 与 document.getElementById("loginId").append(result.username);

这两个都可以正常的追加内容  在使用的时候我们需要手动清空掉 原来的内容

效果：

        未清空：

清空后的效果

 

 

代码：

                   $("#userNameId").empty();// 将原来标签里面的内容清空 否则就是追加了
                   $("#userNameId").append(result.username);//如果不清空 就导致内容追加

2. 终结：

innerHTML：是替换原来的内容  不支持jq获取对象，支持原始的 document.getElementById("loginId").innerHTML=result.loginid;

append：追加内容   一般配合 $("#userNameId").empty(); 使用

 

append()、appendChild() 和 innerHTML 的区别

append()、appendChild() 和 innerHTML 的区别

概念和区别：
append() 
可以同时传入多个节点或字符串，没有返回值；

据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。

https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

 

appendChild() 
只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement(''字符串''))代替】，返回追加的 Node 节点；

若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除；

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。

 

innerHTML
添加的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

 

性能
innerHTML 比 appendChild 要方便，特别是创建的节点属性多，同时还包含文本的时候；
但执行速度的比较上，使用 appendChild 比 innerHTML 要快，特别是内容包括 html 标记时，appendChild 明显要快于  innerHTML，这可能是因为 innerHTML 在铺到页面之前还要对内容进行解析才能铺到页面上，当包含 html 标记过多时， innerHTML速度会明显变慢。


案例：


<body>
<div id="test1"></div><br>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div><br>
<input type="button" onclick="appendTest()" value="testAppendChild">

<script type="text/javascript">
function innerTest() {
var t1 = (new Date()).getTime();
var a = "<b>apple</b>";
var b = document.getElementById("test1");
for (var i = 0; i < 500; i++) {
b.innerHTML += a;
}
t2 = (new Date()).getTime();
console.log("testInnerHTML:" + (t2 - t1));
}

function appendTest() {
var t1 = (new Date()).getTime();
var b = document.getElementById("test2");
for (var i = 0; i < 500; i++) {
var a = document.createElement("b");
a.appendChild(document.createTextNode("apple"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
console.log("testAppendChild:" + (t2 - t1));
}
</script>
</body>
输出结果：

 

 

appendChild

appendChild

如何解决appendChild？

我添加了 Cookie 同意横幅。要求是 https://cdn.cookielaw.org/consent/c4337328/OtAutoBlock.js 在任何其他脚本之前加载。我现在想知道 appendChild 是否是正确的选择。它会在我编写它的确切位置加载 OtAutoBlock 还是将脚本附加到标签的末尾（这为时已晚）。它必须是加载的第一个脚本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- OneTrust Cookies Consent Notice -->
    <script type="text/javascript">
      if ("%rEACT_APP_COOKIE_BAR%" === "true") {
        var otAutoBlock = document.createElement("script");
        otAutoBlock.setAttribute("type","text/javascript");
        otAutoBlock.setAttribute("src","https://cdn.cookielaw.org/consent/c4337328/OtAutoBlock.js");
        
        var otSDKStub = document.createElement("script");
        otSDKStub.setAttribute("type","text/javascript");
        otSDKStub.setAttribute("src","https://cdn.cookielaw.org/scripttemplates/otSDKStub.js");
        otSDKStub.setAttribute("charset","UTF-8");
        otSDKStub.setAttribute("data-domain-script","c4337328");

        document.getElementsByTagName("head")[0].appendChild(otAutoBlock);
        document.getElementsByTagName("head")[0].appendChild(otSDKStub);

        function OptanonWrapper() { }
      }
    </script>

    <script type="text/javascript">
      /* [Should load after OtAutoBlock loads to avoid tracking before consent was given] */
    </script>

  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

解决方法

document.head.appendChild(script) 会将它添加到 <head> 标签的末尾，因此它将在所有其他脚本之后加载。你可以做两件事：

  1. 你在最后用 appendChild 加载它，并让所有其他脚本都带有 defer 属性，如下所示：<script defer> /* something */ </script> defer 强制执行脚本在页面加载后，但如果您加载没有 OtAutoBlock 的 defer，它将在其他页面之前运行。唯一需要注意的是 defer 将导致脚本不会在最后运行，而是在整个页面加载后运行，其中包括 CSS 样式表、其他 JavaScript、图标、图像、HTML 内容、 <script> 标签中的 XHR 请求等

<script>
const load = true; // your stuff here

if (load)
{
  const script = document.createElement(''script'');
  
  window.hasRunned = false;
  script.text = ''alert(\''OtAutoBlock running.\''); window.hasRunned = true;'';
  
  document.head.appendChild(script);
}
</script>

<script defer>
alert(''Another script. Has runned OtAutoBlock: '' + window.hasRunned);
</script>

<script defer>
alert(''And yet another. Has runned OtAutoBlock: '' + window.hasRunned);
</script>

  1. 您使用 insertBefore 将其添加到其他脚本之前，因此它将在它们之前运行。无需在此方法中使用 defer。如果您需要在页面加载之前运行脚本，这可能就是您想要的。

<script>
const load = true; // your stuff here

if (load)
{
  let script = document.createElement(''script'');
  
  window.hasRunned = false;
  script.text = ''alert(\''OtAutoBlock running.\''); window.hasRunned = true;'';
  
  document.head.insertBefore(script,document.head.children[0]);
}
</script>

<script>
alert(''Another script. Has runned OtAutoBlock: '' + window.hasRunned);
</script>

<script>
alert(''And yet another. Has runned OtAutoBlock: '' + window.hasRunned);
</script>

appendChild append innerHTML createElement createTextNode分析

appendChild append innerHTML createElement createTextNode分析

1.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。(属于dom对象)，也可以插入Html对象 例子： Firstname Lastname 输出 FirstnameLastname 2.append函数（JQuery）-一般函数都是JQuery中的 有下面一段html代码：

Greetings

Hello
Goodbye
然后通过一行代码可以得到下面的代码： $(''.inner'').append(''

Test

'');//在OSC_h2_2">

Greetings

Hello

Test

Goodbye

Test

还可以把一个元素添加到另一个元素下面： $(''.container'').append($(''h2'')); //把h2添加到container">
Hello
Goodbye

Greetings

3.createTextNode为创建文本节点，createElement为创建一个元素标签，appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。通常这3者都会在一起使用，在body中添加新的元素 例子：var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); 如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。 4.appendHtml和innerHTML用法差不多，区别如下： （1）在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。 （2）如果appendChild的参数是页面存在的一个元素，则执行后原来的元素会被移除，如document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b元素会先被移除，然后再添加到a中。 （3）通过appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。这也是执行速度差异的主要原因 （4）、在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候。 因此在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。

今天关于“ innerHTML + =…”与“ appendChild和txtNode”的讲解已经结束，谢谢您的阅读，如果想了解更多关于169. 标签内容追加 innerHTML 与 append、append()、appendChild() 和 innerHTML 的区别、appendChild、appendChild append innerHTML createElement createTextNode分析的相关知识，请在本站搜索。

本文标签：

上一篇如何理解Kademlia节点操作的时间复杂度（kafka节点数）

下一篇createElement优于innerHTML的优势？（innerhtml和createelement）

相关文章