Question

我有满足的div：

<div class="example" contenteditable="true">This is an example</div>

使用innerHTML，我得到了＃34;这是一个例子＆＃34;。

现在位于第7位（在＆＃34之后;是＆＃34;），我想添加一个html（<span class="yup">NOT</span>）来提供以下内容（使用click，{{1}什么不是）

focus

了解插入符号位置和innerHTML，如何在其中添加html？

我考虑过使用<div class="example" contenteditable="true">This is <span class="yup">NOT</span> an example</div>然后使用substr，但这取代了整个内容，我想避免使用它。我想直接在特定位置添加内容。

例如：替换整个内容以及我不想做的事情。

.html(content)

而不是取代它，我只想＆＃34;注入＆＃34;它

任何建议都将不胜感激。

Answer 1

您无法在不设置整个内容的情况下更改元素的HTML字符串。我建议将<span class="yup">NOT</span>放在适当的位置，但使CSS不可见。然后，如果它被切换，你只需用Javascript显示它。

Answer 2

字符串在JavaScript中是不可变的，您无法在不创建新内容的情况下修改内容。

这是尽可能接近（与var num1 = 123123123.456456456; var num1a = num1.ToString("G16") + "."; Console.WriteLine(long.Parse(num1a.Substring(0, num1a.IndexOf('.'))).ToString("N0") + num1a.Substring(num1a.IndexOf('.'), num1a.LastIndexOf('.')- num1a.IndexOf('.')));和substr相同）。

＆＃13;

substring

＆＃13;

// Store the new data
var newOutput = " <span class='yup'>NOT</span> ";

// Get a reference to the target div
var theDiv = $("div.example");

// Split the current content of the div where there are spaces
// and return the individual words into a new array
var words = theDiv.text().split(/\s+/g);

// Inject the right pieces of the array along with spaces and the new content
// into the div
theDiv.html(words[0] + " " + words[1] + newOutput + words[2] + " " + words[3]);

＆＃13;

但是，如果您有机会从纯JavaScript生成<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="example" contenteditable="true">This is an example</div>的内容，那么您可以只注入一次正确的字符串，就像这样（运行此代码片段几次以便您可以看到div＆＃39;内容随着各种随机数的变化而变化。）

＆＃13;

div

＆＃13;

// Store the new data
var output1 = "This is an example.";
var output2 = "This is <span class='yup'>NOT</span> an example.";

// Get a reference to the target div
var theDiv = $("div.example");


// Inject the correct string into the div based on some criteria
var x = Math.random() > .5;
x === true ? theDiv.html(output1) : theDiv.html(output2);

＆＃13;

在特定位置添加html

2 个答案: