Question

我正在用JavaScript编写一个小编辑器。我要问的是，当我点击“Bold”按钮时，我会这样添加：

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;

感谢。

Answer 1

下载代码。告诉我这是否有效

     <!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> </b>' + end;

你可以去el.appendChild(child)。

如果有效，请告诉我

Answer 2

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

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));

将元素放在其他元素的innerHTML中

2 个答案: