Question

我在本地存储中有一个包含多个元素的元素，为简单起见，我将创建元素：

<div id="outer">
  <ul id="inner">
    <li id="item">
    </li>
  </ul>
</div>

元素保存为字符串，我想操纵内容。像这样：

let local_storage_element = localStorage.getItem("val")  
$(local_storage_element+':last-child').append("<p>something</p>")

无论我在local_storage_element之后添加什么选择器，它总是会将值附加到字符串而不是所选元素（在这种情况下为：last-child）

有没有人知道如何附加到字符串中的特定元素？

Answer 1

您不能使用字符串作为选择器。如果你想将变换字符串转换为html，那么你应该把它作为innerHTML放在一些元素中。因此，尝试创建一些隐藏的div并将您的字符串作为HTML插入其中。像这样的东西

var your_string = '<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>';
document.querySelector('.hidden').innerHTML = your_string;
document.querySelector('ul li:last-child').innerHTML = 'your content';
document.querySelector('.result').appendChild(document.querySelector('ul'));

Example

Answer 2

当您从localStorage获取parent并将其用作选择器时，可能会出现此问题，因为它只接受parent作为选择器。如果要添加元素作为父元素的最后一个子元素，可以使用'<div id="outer">'代替"#outer"。

after()

append()

Answer 3

虽然你在标题中写了jquery，但是还添加了javascript标记，所以我想为什么不提供一个能够证明你需要的答案，并帮助你以你想要的方式完成任务。

在 DocumentFragment接口表示没有父级的最小文档对象。它用作存储一部分的Document的轻量级版本由标准文档组成的节点组成的文档结构。关键的区别在于因为文档片段不是其中的一部分活动文档树结构，对片段所做的更改不会发生影响文档，导致重排或产生任何性能影响在进行更改时可能会发生这种情况。

那么如何做到这一点，因为DocumentFragment仍然在其中添加节点而不是字符串，我们将创建一个临时元素并使用localStorage从innerHtml添加HTML，然后附加{{1那个临时节点，即我们现在被视为节点的实际字符串，文档片段，然后搜索并将HTML附加到它，我们将使用我们的temp元素每次添加HTML，见下文。

我会在帖子中上面给出的字符串firstChild中添加一个新的子div，这里有工作FIDDLE因为SO不支持localStorage你可以看到它正常工作打开控制台以查看添加了新子项的结果HTML，下面是代码

#outer

使用Jquery将值附加到字符串中的特定元素

3 个答案: