如何在textarea中添加html？

Question

我想在您通过单击按钮更改 div1 和 div2 位置后，在文本区域中输入一个 html 代码。我对 html div parent 所做的任何更改也应在 textarea 中进行更改。我不知道该怎么做？目的是在数据库中发送一个更改的 div parent..

<style>
#parent{
width: 50px;
height: 100px;
padding: 10px;
background-color: grey;
}
#div1{
width: 50px;
height: 50px;
background-color: red;
}
#div2{
width: 50px;
height: 50px;
background-color: blue;
}
</style>

<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

<button type="button"  onclick="myFunctionSwitch()" >Chenge texareaHTML</button>

<form>
<textarea rows="4" cols="30" id="showhtml">
<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
</textarea>
</form>


<script>

function myFunctionSwitch() {

  document.getElementById("div1").remove();
  document.getElementById("div2").remove();

  var x = document.createElement('div');
  x.id = 'div2';
  document.getElementById("parent").appendChild(x);
  var y = document.createElement('div');
  y.id = 'div1';
  document.getElementById("parent").appendChild(y);


  document.getElementById("showhtml").innerHTML = x + y;
}

</script>

Answer 1

如果您在 textarea 中输入 html，它将被转义，不会被解析为 html 元素。

做你想做的唯一方法是使用 contenteditable 属性。

查看此 documentation。

Answer 2

改变

<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

到

<div id=container>
    <div id="parent">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>

和

document.getElementById("showhtml").innerHTML = x + y;

到

document.getElementById("showhtml").innerHTML = 
document.getElementById("container").innerHTML;

这是工作代码：

function myFunctionSwitch() {

  document.getElementById("div1").remove();
  document.getElementById("div2").remove();

  var x = document.createElement('div');
  x.id = 'div2';
  document.getElementById("parent").appendChild(x);
  var y = document.createElement('div');
  y.id = 'div1';
  document.getElementById("parent").appendChild(y);


  document.getElementById("showhtml").innerHTML = document.getElementById("container").innerHTML;
}

#parent{
width: 50px;
height: 100px;
padding: 10px;
background-color: grey;
}
#div1{
width: 50px;
height: 50px;
background-color: red;
}
#div2{
width: 50px;
height: 50px;
background-color: blue;
}

<div id=container>
<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
</div>

<button type="button"  onclick="myFunctionSwitch()" >Chenge texareaHTML</button>

<form>
<textarea rows="4" cols="30" id="showhtml">
<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
</div>
</textarea>
</form>

如何在textarea中添加html？

How to add html inside textarea?

html

textarea