将文本插入 HTML 样式标记 - JavaScript答案

【问题标题】：Insert Text Into an HTML Style Tag - JavaScript将文本插入 HTML 样式标记 - JavaScript
【发布时间】：2020-05-21 01:06:26
【问题描述】：

我在 HTML code 标记中有一些 CSS 文本，我想将其注入到页面上的 <style> 标记中。

我可以隔离文本内容，但它似乎不允许我使用 .textContent 将此文本内容放入样式标签中 - 不可能在 JavaScript 中的样式标签上执行此操作吗？

Codepen：https://codepen.io/emilychews/pen/YzydmGb

// GET TEXT CONTENT OF CODE TAG
var CSSInner = document.getElementById("language-css-js").textContent;

// INJECT TEXT CONTENT BETWEEN STYLE TAGS
function resultInsertCSS() {
  document.getElementById("result-pane-style-tag").textContent = CSSInner;
}

resultInsertCSS();

<code id="language-css-js">
  h2 {
  line-height: 1.2;
  }
  p {
  line-height: 1.5;
  }
</code>

<style id="#result-pane-style-tag"></style>

【问题讨论】：

# 不是必须的兄弟
是否需要在样式标签中？

标签： javascript html css text innerhtml

【解决方案1】：

当然，您可以这样做。直接指定样式可能会更好，但如果您只想按照描述的方式进行操作，这里有一个工作示例。

https://repl.it/@nicholashazel/ExpertSpecializedStructs

<code id="language-css-js">
  h2 {
  line-height: 1.2;
  color: red;
  }
</code>

<style id="result-pane-style-tag"></style>
<h2>Hello</h2>
<script>
  let stuff = document.getElementById('language-css-js').innerHTML;
  document.getElementById('result-pane-style-tag').textContent = stuff;
</script>

另外，正如其他答案中提到的，它是一个 ID 的事实固有地赋予它 # 属性，因此将其添加到 ID 是不相关的。

ID 应该是result-pane-style-tag
在 CSS 或 jQuery 中引用 ID，您将使用 #result-pane-style-tag，但对于 getElementById，您只需将其引用为它的名称。

【讨论】：

【解决方案2】：

<style id="#result-pane-style-tag"></style>

应该是

<style id="result-pane-style-tag"></style>

没有#。

【讨论】：

【解决方案3】：

去掉id前面的#，下面的代码应该可以工作了：

// GET TEXT CONTENT OF CODE TAG
var CSSInner = document.getElementById("language-css-js").innerHTML;

// INJECT TEXT CONTENT BETWEEN STYLE TAGS
function resultInsertCSS() {
  document.getElementById("result-pane-style-tag").textContent = CSSInner;
  document.getElementById("language-css-js").innerHTML=""
}

resultInsertCSS();

【讨论】：