テキストが間違ったhtml要素に追加されるのはなぜですか？

概要：編集可能なdivセクションがあります。 divの下には、span要素を作成するボタンがあるspan要素にテキスト「タグ」を挿入し、最終的にはその編集可能なdivの中にspan要素を追加しテキストが間違った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の内側に入力を開始した後、予想通り、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 id="sample-div" contenteditable="true"> 
    <span class="tag">tag this is a continuation</span> 
</div>

マイ期待だった：テキスト「これは続きですが、」また、span要素内で追加取得なぜ

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

だから、私の質問はありますか？私の期待の下で述べたものを達成するにはどうすればよいですか？

出典

2017-09-02 rupali317

contenteditable div内のすべてのテキストは、ある種の子タグ内にある必要があると思います。 –

@GetOffMyLawn、そうでない：https://jsfiddle.net/mdeenbvv/1/ –

「これは継続です」というテキストはどこから来たのですか？ –

最も簡単な解決策はfalseであるためにあなたのスパンのcontentEditable属性を設定するには、次のようになります。

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要素に追加されるのはなぜですか？

答えて

関連する問題