将元素放在其他元素的内部HTML中

Put element inside innerHTML of other element

本文关键字：元素 内部 HTML 其他      更新时间：2023-09-26

我正在用JavaScript编写一个小编辑器。我要问的是，当我单击"粗体"按钮时，我像这样添加它：

function addBold() {
    var el = selection().anchorNode.parentNode; 
    var str = el.innerHTML; 
    var offset = selection().getRangeAt(0).endOffset;
    var start = str.substr(0,offset);
    var end = str.substr(offset, str.length);
    el.innerHTML = start + '<b>&#32;</b>' + end;
    placeCaretAtNode(el.children[0]);
}

我需要使用 appendChild 附加 Bold 元素以保存该元素而不是：

el.innerHTML = start + 'HERE I NEED TO GET THIS ELEMENT' + end;

谢谢。

这是一个代码。 告诉我这是否有效 

     <!DOCTYPE html>
<html>
<head>
    <script>
function  bgchange() {
try{
var child = document.createElement("b");
child.innerHTML = "Test";
document.getElementById("dvPercentage").innerHTML = document.getElementById("dvPercentage").innerHTML + "Test"
 document.getElementById("dvPercentage").appendChild(child);
 document.getElementById("dvPercentage").innerHTML = document.getElementById("dvPercentage").innerHTML + "Test"
 }catch(e){
 alert(e);
 }
};
    </script>
<head>
<body onload="bgchange()" style="background-color:red">
      <div id="dvPercentage" style="height: 80%">
</body>
</html>

所以不做el.innerHTML = start + '<b>&#32;</b>' + end;

你可以去el.appendChild(child).

请让我知道它是否有效

如果要切换粗体功能，可以执行以下代码：

document.execCommand('bold');

但是，如果您喜欢自己的方法，请尝试以下操作：

var bold;
while(el.firstChild) {  // empty the el element
    el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode(start));
bold = document.createElement('b');
bold.appendchild(document.createTextNode('bold string'));
el.appendChild(bold);
el.appendChild(document.createTextNode(end));
相关文章：