DIV如何充當Javascript中的另一個元素？

Question

我在Java語言方面的技能是有限的，為了練習，我嘗試使用Chrome開發人員工具以JS代碼以編程方式填充某些元素。 我導航到一個站點，訪問控制台並嘗試使用JS代碼操縱DOM元素。

用戶通常可以輸入數據的元素是INPUT，TEXTAREA，SELECT等等。 但是最近我一直看到用戶可以編輯的元素，但它們只是DIV。 換句話說，DIV就像INPUT或TEXTAREA，這讓我感到困惑。

這是一個示例：我從頁面中提取了此源以在Facebook組中發布主題。

請注意，具有“ Write something” innerhtml的div在頁面中充當文本區域。 您可以在任何Facebook組中重現此代碼，例如https://www.facebook.com/groups/914737511952904/ （您可能需要先加入該組，然后才能看到發布主題的框）。

<div class="_1mwp _1mwq _5bu_ _5yk1"><div class="_5yk2" tabindex="-2">
 <div class="_5rp7">
   <div class="_1p1t">
    <div class="_1p1v" id="placeholder-   2bc29">Write something... </div>
   </div>
 </div>
</div>

如果此元素是TEXTAREA，我可以輕松地執行以下操作

 document.getElementById('elementId').value = 'New text';

但是在上述情況下，“ textarea”元素實際上是DIV，僅此而已。

如何使用JS在其上插入文本？ DIV如何像文本區域或輸入那樣工作？

謝謝 ！

Answer 1

如何使用JS在其上插入文本？

那很簡單。 只需使用innerHTML屬性分配文本值即可。

document.getElementById('elementId').innerHTML = "Text inserted"

但是，您可以僅使用CSS進行相同的操作，然后從div調用相同的屬性來檢索文本。

DIV如何像文本區域或輸入一樣工作？

一種非常實用的方法是在div上使用contentEditable屬性，但是您也可以使用CSS樣式，在某些情況下還可以使用一些JavaScript代碼。

您在這里有一個使用CSS樣式和contentEditable屬性的簡單示例： https : //jsfiddle.net/ThinkingStiff/AbKTQ/

Answer 2

如何使用JS在其上插入文本？

element.textContent = "text content"

片段1

 var div = document.querySelector('div'); div.textContent = "line of text by textContent" 

 <div></div> 

DIV如何充當文本區域或輸入？

您可以將contneteditable添加到最初不可編輯的元素中。

 <div contenteditable></div>

有關如何設置JS可編輯contenteditable ，請參見代碼段

片段2

 var editor = document.querySelector('div'); editor.setAttribute('contenteditable', true); 

 <div>This is a div. Click on me and start typing.</div>