如何使 JavaScript 中添加的元素與 HTML 中添加的元素反應相同？

Question

我正在嘗試在 JavaScript 中添加新元素，當我將鼠標放在 hover 上時，我想查看 innerHTML 中有多少個字母。 function 適用於 html 中添加的元素，但新元素不適用。

 var input = document.getElementById("input") var button = document.getElementById("button"); button.onclick = function () { var p = document.createElement("p"); p.innerHTML = input.value; document.body.appendChild(p); p.id="p"; } var ar = document.getElementsByTagName("p"); for (var i = 0; i < ar.length; ++i) { ar[i].title=ar[i].innerHTML.length; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <input id="input"></input> <button type="button" id="button"> click</button> <p>p1</p> <p>p2</p> </body> </html>

我想要達到的目標：元素 I hover on 的字母數，

我得到的是：我在 hover 上的元素的字母數，但只有在 html 中添加的那些。

Answer 1

發生這種情況是因為您僅在頁面加載時添加標題。 創建新元素時不會添加標題。 您應該在單擊按鈕時執行類似的操作：

button.onclick = function () { 
   var p = document.createElement("p");
   p.innerHTML = input.value ;  
   document.body.appendChild(p);
   p.id="p";
   p.title = input.value.length;
}

Answer 2

您可以像這樣更改您的點擊處理程序：

button.onclick = function () { 
    var p = document.createElement("p");
    p.innerHTML = input.value ;  
    document.body.appendChild(p);
    p.id="p";
    p.title = input.value.length
}

不過，最好制作一個新的 function ，它將執行此代碼，以便您減少代碼重復，即我會像這樣重寫它：

function applyFormatting(pElement) {
    pElement.title = pElement.innerHTML.length
}

button.onclick = function () { 
    var p = document.createElement("p");
    p.innerHTML = input.value ;  
    document.body.appendChild(p);
    p.id="p";
    applyFormatting(p);
}

var ar = document.getElementsByTagName("p"); 

for (var i = 0; i < ar.length; ++i) {
    applyFormatting(ar[i]);
}

這樣，您要應用於現有 p 元素的“格式”集中在 function 中，並且您知道這些元素將經歷完全相同的轉換。

如何使 JavaScript 中添加的元素與 HTML 中添加的元素反應相同？

問題描述

2 個解決方案

解決方案1
0 2021-04-02 10:35:08

解決方案2
0 已采納 2021-04-02 10:41:57

如何使 JavaScript 中添加的元素與 HTML 中添加的元素反應相同？

問題描述

2 個解決方案

解決方案1 0 2021-04-02 10:35:08

解決方案2 0 已采納 2021-04-02 10:41:57

解決方案1
0 2021-04-02 10:35:08

解決方案2
0 已采納 2021-04-02 10:41:57