我想使用javascript将一些元素插入当前页面。
例如这是原始文件：
<p>世界你好！</ p>

现在，我想在文本中插入一个元素，这样它将变为：

<p>我们好<span id = span1>新</ span>世界！</ p>

我需要span标签，因为我想稍后再处理。显示或者隐藏。
但是现在出现了问题，如果原始页面已经在所有<span>标记上定义了一种奇怪的CSS样式，那么我刚刚插入的" new"将不会与" Hello"和" world"相同。如何避免这种情况？我希望"新"与"你好"和"世界"完全相同。

解决方案

回答

还要在JavaScript版本的<span>标签上包含CSS中定义的类定义。

<span class="class_defined_in_css">

(此<span>`标签将成为JavaScript代码的一部分。)

回答

为什么不给该段落指定ID，然后在必要时使用Javascript添加或者删除该词？当我们插入单词" new"或者完全更改段落内容时，它肯定会保留与段落相同的格式。

回答

好吧，我不知道我们对使用<span>标签有多满意，但是为什么不这样做呢？

<p style="display: inline">Hello <p id="myIdValue" style="display: inline">new</p> World</p>

这样，插入的html保留与外部html相同的样式，并且我们仍然可以使用它的句柄，等等。当然，我们必须添加内联CSS样式，但是它可以工作。

回答

唯一的方法是修改其他跨度以包括一个类名称，并且仅将样式应用于具有该类的跨度，或者覆盖为新跨度的所有跨度设置的样式。

因此，如果我们已完成：

span {
  display: block;
  margin: 10px;
  padding: 10px;
}

我们可以使用以下方法覆盖：

<span style="display: inline; margin: 0; padding: 0;">New Span</span>

回答

只需覆盖任何跨度样式即可。将布局属性设置回浏览器默认值，并将格式设置为从父级继承：

span#yourSpan {
  /* defaults */
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;

  /* inherit from parent node */
  font: inherit;
  color: inherit;
  text-decoration: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: inherit;
  word-spacing: inherit;
}

这应该足够了，尽管如果我们不使用id，则可能需要添加！important：

<span class="hello-node">hello</span>

span.hello-node {
  /* defaults */
  position: static !important;
  display: inline !important;
  ...
}