jquery更改存储在var中的元素内的内容

Question

我有......

var element = "<div class = 'row'> <span class = 'text'></span></div>"

我想在span中添加一些文本，然后将row附加到某个元素。我试过了

$(element).find(".text").text("myText"); //need to append the element returned by this?
$(".myelement").append(element);

这不起作用。我知道这是错的。但是这样做的正确方法是什么？

Answer 1

您正在更改创建的jQuery包装器，然后附加原始字符串（从未更改过）。

相反：

var el = $(element);

el. 
  find(".text").
  text("myText");

el.appendTo( $(".myelement") );

将附加实际的更新元素。

var element = "<div class = 'row'> <span class = 'text'></span></div>"

var el = $(element);

el. 
  find(".text").
  text("myText");

el.appendTo( $(".myelement") );

.row {
  border: 1px solid red;
}

span {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="myelement"></div>

Answer 2

简单的方法：

var element = element.replace("></span>",">New content</span");

Answer 3

var element = "<div class = 'row'> <span class = 'text'></span></div>" var jqueryElement = $(element); $(".myelement").append(jqueryElement); jqueryElement.find(".text").text("myText");

这会将它添加到DOM，然后设置文本。 Mohamed-Yousef的答案不起作用，因为他附加一个字符串，然后尝试修改一个不同的元素，因为他没有在DOM元素上调用find（），而是从字符串创建了另一个新元素。

Answer 4

var element = "<div class = 'row'> <span class = 'text'></span></div>";
$(".myelement").append(element).find(".text").last().text("myText");