Question

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

<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

更改

<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>

Answer 2

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

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

查看此documentation。

如何在textarea中添加html？

2 个答案: