Как добавить html внутри textarea?

Я хочу ввести html-код в текстовую область после того, как вы измените положение div1 и div2 нажатием кнопки. Любые изменения, которые я делаю в родительском элементе html div, также должны быть изменены в текстовой области. Я понятия не имею, как это сделать? Цель состоит в том, чтобы отправить измененный родитель 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>

не могли бы вы проголосовать за мой ответ, если он поможет? :)

— 14.05.2019 06:10

stackoverflow.com/questions/56181151/…

— 18.05.2019 08:33

html textarea

13.05.2019 08:45

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы введете html в свой textarea, он будет экранирован и не будет проанализирован как элемент html.

Единственный способ сделать то, что вы хотите, это использовать атрибут contenteditable.

Посмотреть этот документация.

13.05.2019 08:49

Ответ принят как подходящий

изменять

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

Алиреза Йездандуст благодарит за вашу помощь. Мне нужна еще одна деталь. Как получить HTML и СТИЛЬ в "showhtml" (текстовое поле)? Пример: <div id = "div1" style = "width: 150px;"> </ div> В настоящее время я получаю только HTML

— 14.05.2019 07:53

13.05.2019 08:59