為什么文本被附加到錯誤的html元素？

Question

概述：我有一個可編輯的div部分。 在div下面，有一個創建span元素的按鈕，在span元素中插入文本“tag”，最后在可編輯的div中追加span元素

<!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>

觀察：我點擊按鈕，span元素按預期添加到div

<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元素中？ 我如何實現我期望的陳述？

Answer 1

最簡單的解決方案是將span的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);
}

為什么文本被附加到錯誤的html元素？

問題描述

1 個解決方案

解決方案1
3 已采納 2017-09-02 05:16:28

為什么文本被附加到錯誤的html元素？

問題描述

1 個解決方案

解決方案1 3 已采納 2017-09-02 05:16:28

解決方案1
3 已采納 2017-09-02 05:16:28