如何使用 Javascript 替换 html 文件中的 标记答案

【问题标题】：How to replace a tag in an html file using Javascript如何使用 Javascript 替换 html 文件中的 标记
【发布时间】：2017-05-01 18:42:31
【问题描述】：

在我拥有的一个 Html 文件中，有一个段落标签，基本上看起来像这样：

<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>

本段的内容是从用户填写的文本区域中获取的，该文本区域的值通过 jquery 获取并填充到该元素中。输出如下所示：Hey What's Up

此段落标记忽略段落中的换行符，因此该段落全部显示在一行上。由于项目的格式和布局，我不一定能更改html源代码。我想知道是否有办法将这个确切的元素更改为：

<pre class="col-sm-8 form-control-static wordwrap">
 Hey
 What's
 Up
</pre>

仅使用 javascript。这可能吗？这样我的输出就会保留换行符。

【问题讨论】：

使用<pre>标签
使用 CSS white-space: pre; 设置样式不是更容易吗？
document.querySelector('p').innerHTML = "Hey What's Up";
我不认为用前置标签替换段落标签是你真正想要的。仍然使用段落标签但仍然尊重您的换行符会更好吗？因为这对 css 是可行的（如上所述）

标签： javascript jquery html css

【解决方案1】：

我认为您正在寻找类似的东西。您标记了 jquery，所以我使用了它，但这也可以在 vanilla js 中完成。

如果您想更改为仅在需要时使用按钮，我已链接到 onkeyup 事件

$(document).ready(function(){

  function updateContent() {
     $('#p1').html($('#source').val());
  }

  $('#update').on('click', function(e){
   updateContent();
   // add other stuff here
   // for only the click event
  })
  
  $('#source').on('keyup', updateContent);


})

button {
  display:block;
}

#source {
  height:100px;
}
#p1{
  white-space:pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content

add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>

<p id="p1">THIS WILL CHANGE!</p>

【讨论】：

【解决方案2】：

这很简单，以前也有人问过……但是这里是，使用 DOM：

document.getElementById("p1").innerHTML = "&lt;p&gt;This&lt;/p&gt;&lt;p&gt;Has&lt;/p&gt;&lt;p&gt;Changed!&lt;/p&gt;";

&lt;p id="p1"&gt;THIS WILL CHANGE!&lt;/p&gt;

所以你需要的代码是：

document.getElementById("p1").innerHTML = "New text!";

编辑

这比使用<pre> 标签更简单、更容易且对浏览器更友好。因此，我强烈建议您改用它。

【讨论】：

这样更好！
“并且之前已经被问过” 那么问题应该被欺骗关闭。你有重复的吗？
Here 和 here。这并没有结束！
为什么会被否决。你们疯了吗？？谁对正确且唯一的答案投了反对票？
我的意思是......这个问题专门询问如何用预先格式化的文本标签替换段落标签。你的回答改变了段落标签的 innerhtml 并且没有说明为什么这比做他们想做的更好。