如何替换 div 元素内段落内的文本？

Question

我需要在 DIV 元素内的段落中动态设置文本。我知道 divID 并且可以使用 get document.getElementById(divID) 通过 id 获取 div 这returns以下：

<div id="mynote72031" class="mydiv" ondrop="drop(event,this.id)" ondragover="allowDrop(event)" style="cursor: move; display: block; top: 19px; left: 19px; width: 375px;">
  <a style="top:0px; right:5px;  position:absolute; color:#F00" href="javascript:;" onclick="hideElement(this)">X</a>
  <p id="noteContent1" ondblclick="editContent(this)">Note Number: 1</p>
</div>

函数应如下所示：

function updateNote(divID, paragraphInnerHTML) {
  var updateNoteP = document.getElementById(divID);
  //Update Paragraph inside the DIV here
}

注意段落的id总是noteContent1

Answer 1

与您的变量名称非常接近，这假设您要使用的是 html。如果它只是一个字符串，您可以使用 updateNoteP.innerText 代替

如果您将 pID 作为“noteContent1”传递，这将更改 P

的内容

function updateNote(pID, paragraphInnerHTML) {
  var updateNoteP = document.getElementById(divID);
  // check that element is found
  if (updateNoteP) {
  // update inner html
   updateNoteP.parentElement.children[1].innerHTML = paragraphInnerHTML
  }
}

Answer 2

您可以通过两种方式更改 HTML 标签内的文本

function updateNote(divID, paragraphInnerHTML) {
  var updateNoteP = document.getElementById(divID);
  //Update Paragraph inside the DIV here
  let $targetEle = updateNoteP.childNodes[1]
  // use innerHTML
  $targetEle.innerHTML = paragraphInnerHTML
  // or textContext
  $targetEle.textContent = paragraphInnerHTML 
}

Answer 3

您可以使用 Node.lastChild 访问 p 标签，因为它是 div 标签中的最后一个元素

function updateNote(divID, paragraphInnerHTML) {
    var updateNoteP = document.getElementById(divID);
    //Update Paragraph inside the DIV here
    let pElement = updateNoteP.lastChild;
    pElement.innerHTML = paragraphInnerHTML;
}

如何替换 div 元素内段落内的文本？

How do I replace text inside a paragraph inside a div element?

html

javascript

dom