为什么文本会附加到错误的html元素？

总览：我有一个可编辑的div部分。下面的股利，还有它创建了一个span元素的按钮，插入在span元素文本“标签”，最后追加span元素在编辑DIV为什么文本会附加到错误的html元素？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <style type="text/css"> 
     #sample-div 
     { 
      border-style: solid; 
      border-width: 1px; 
      border-color: black; 
      height:100px; 
      overflow: auto; 
     } 
    </style> 
    <script type="text/javascript"> 
     function addTags() 
     { 
      var tag = document.createElement("span"); 
      tag.className = "tag" 
      tag.innerHTML = "tag"; 
      $('#sample-div').append(tag); 
     } 
    </script> 
</head> 
<body> 
<div id="sample-div" contenteditable="true"></div> 
<input type="button" value="date" id="sample-tags" onclick="addTags()"> 
</body> 
</html>

观察：我按一下按钮，跨度元素被添加到预期

<div id="sample-div" contenteditable="true"> 
    <span class="tag">tag</span> 
</div> 
<input type="button" value="date" id="sample-tags" onclick="addTags()">

不过，我开始DIV中键入后格，我注意到以下几点：

<div id="sample-div" contenteditable="true"> 
    <span class="tag">tag this is a continuation</span> 
</div>

我期望是：

<div id="sample-div" contenteditable="true"> 
    <span class="tag">tag</span> this is a continuation 
</div>

所以，我的问题是，为什么文本“这是一个延续”也越来越附加span元素里面？我如何达到我预期的目标？

来源

2017-09-02 rupali317

我认为contenteditable div内的所有文本都需要在某种子标签内。 –

@GetOffMyLawn，不正确：https：//jsfiddle.net/mdeenbvv/1/ –

“这是一个延续”的文本从哪里来的？ –

最简单的解决办法是设置你的跨度contentEditable属性是false：

function addTags() { 
    var tag = document.createElement("span"); 
    tag.className = "tag" 
    tag.innerHTML = "tag"; 
    tag.contentEditable = false; 
    $('#sample-div').append(tag); 
}

边注：由于您使用jQuery，你不需要手动创建标签：

function addTags() { 
    var tag = '<span class="tag" contenteditable="false">tag</span>' 
    $('#sample-div').append(tag); 
}

来源

2017-09-02 05:16:28

为什么文本会附加到错误的html元素？

回答

相关问题