HTML/Javascript - 如何將輸入字段中的文本顯示為 HTML 代碼？

Question

我的網頁上有一個文本區域，用戶將在其中輸入 HTML 代碼。我想在我的網頁上的其他位置顯示該 HTML 代碼。 我怎么知道這個？

本質上，我想做堆棧溢出在他們的問題中所做的事情，詢問文本區域，您可以在其中輸入諸如 strong 之類的 HTML 標簽，並且在顯示文本時它們會像這樣正確顯示。 另一個例子是用戶可能輸入一個圖像標簽，我希望該圖像顯示在網站的另一部分。

我在后端使用 Node 和 Express 和 MongoDB 來存儲用戶輸入和 ejs 模板以顯示 HTML。

Answer 1

 $("#htmlinput").on("input",function(){ $("#target").html($(this).val()); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="htmlinput"></textarea> <div id="target"></div>

Answer 2

下面是我的代碼。 在我的 JS 中，我從 textarea 獲取值並使用.innerHTML屬性將其顯示到具有output id 的 div 元素。 此屬性設置或返回元素的 HTML 內容（內部 HTML）。

 function myInput(){ var y = document.getElementById('textarea').value; document.getElementById('output').innerHTML = y; }

 *{ box-sizing: border-box; } textarea{ width: 100%; } #output{ display:block; background:#489ae0; color: #fff; margin: 0; padding: 10px 20px; box-sizing: border-box; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea> <div id="output"></div>

Answer 3

在js上

function write() {
  var text = document.form.input.value;
  return document.getElementById('id').innerHTML = text;
}

在 html 上

<form name="form">
<textarea onkeyup="write()" name="input"></textarea>
<div id="id"></div>
</form>