在不使用 innerHTML 的情况下获取 <p> 的值

Posted

技术标签:

【中文标题】在不使用 innerHTML 的情况下获取 <p> 的值【英文标题】:Getting value of <p> without the use of innerHTML 【发布时间】:2014-02-17 07:51:46 【问题描述】:

首先,如果这是一个长代码段,我很抱歉,但是,我正在尝试制作一个模式窗口,它会在我的用户表单中写入您在我的用户表单中编写的内容并要求您确认。我目前在学习 javascript 的课程中​​,我不允许使用 innerhtml,我必须动态编写“名字:”等(名字的文本),并且不允许只在弹出窗口中编写它。我已经完成了大部分工作,但是“名字:”“姓氏”等显示为“未定义”,或者(如您所见,在这种情况下我只尝试了名字)显示为“空”。

希望有人能帮我解释一下这个主题,这是 HTML:

<form action="http://voyager.lnu.se/tekinet/kurser/dtt/wp_webbteknik/process_form.php" method="POST" id="userform" target="_blank"> 

            <p id="formQuestion1">Förnamn</p>
            <div id="error1"></div>
            <input type="text" name="firstName" id="test"/>

            <p id="formQuestion2">Efternamn</p>
            <div id="error2"></div>
            <input type="text" name="lastName" />

            <p id="formQuestion3">Postnummer</p>
            <div id="error3"></div>
            <input type="text" name="postCode" id="codeText"/>

            <p id="formQuestion4">E-post</p>
            <div id="error4"></div>
            <input type="text" name="eMail" />

            <br />
            <br />

            <label id="model" class="formQuestion" for="priceModel">Prismodell</label>
            <br />
                        <select name="Type" id="priceModel">
                            <option value="Låg" selected>Låg</option>
                            <option value="Medel">Medel</option>
                            <option value="Hög">Hög</option>
                        </select>


                <br />
                <br />
                <br />
                <input id="sendButton" type="submit" value="Genomför Köp" />
          </form>

这是模态窗口(Javascript)的片段

 function popup(backgroundDiv) 
var popForm = document.getElementById("userform");
var myDiv = document.createElement("div");
myDiv.className = "popupWindow";
var priceModel = document.getElementById("priceModel");

// Knappar

var newButton = document.createElement("button");
var newerButton = document.createElement("button");

newButton.setAttribute("value", "Skicka");

newButton.innerHTML = "Skicka";  // Here I actually use innerHTML because I don't know
newerButton.innerHTML = "Stäng"; // any other way to set the text inside the button

newButton.className = "popupButton";
newerButton.className = "popupButton";

newButton.setAttribute("id", "Skicka");
newerButton.setAttribute("id", "Avbryt");

myDiv.appendChild(newButton);
myDiv.appendChild(newerButton);

// Information

var h1 = document.createElement("h1");
h1.setAttribute("id", "popuph1");
var h1Text = document.createTextNode("Vänligen kontrollera dina uppgifter");

var text = document.getElementById("formQuestion1");

var writeFname = text.nodeValue + popForm.elements.firstName.value;
var writeLname = document.getElementById("formQuestion2").value + popForm.elements.lastName.value;
var writeCode = document.getElementById("formQuestion3").value + popForm.elements.postCode.value;
var writeMail = document.getElementById("formQuestion4").value + popForm.elements.eMail.value;
var writePlan = document.getElementById("model").value + priceModel.value; 

var p1 = document.createTextNode(writeFname);
var p2 = document.createTextNode(writeLname);
var p3 = document.createTextNode(writeCode);
var p4 = document.createTextNode(writeMail);
var p5 = document.createTextNode(writePlan);

h1.appendChild(h1Text);

myDiv.appendChild(h1);
myDiv.appendChild(p1);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p2);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p3);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p4);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p5);


document.body.appendChild(myDiv);

newButton.onclick = function () 
    document.body.removeChild(myDiv);
    document.body.removeChild(backgroundDiv);
    return true; 
;

【问题讨论】:

您需要在 DOM 中查找 TEXT 节点。 TEXT 节点的nodeValue 属性是它的文本内容。 您能说得更具体些吗?我是 Javascript 新手,如何查找这些内容? 您的问题标题是 Getting the value 但您的代码看起来需要一种 setting 值的方法。它是哪一个?无论如何,here is a relevant MDN page 和 here is a relevant SO question。 问题是关于从“formQuestion1”(例如)中获取值,该值应该是“Förnamn”(

中的文本),并且能够编写该值而无需实际编写代码中的“Förnamn”。如果我将 formQuestion1 的值更改为“First name:”,则弹出窗口中的值也应该更改。我希望这能更好地解释它。

啊,我明白了;对不起,我应该明白这一点。好吧,如果您使用getElementById() 获得对DOM 元素的引用,您可以通过“firstChild”节点属性查看它的子元素,然后查找nodeType 为3(表示TEXT)的节点。 【参考方案1】:

如果你不想使用innerHTML,那么你可以使用这些选项,假设你想要来自这个节点&lt;p id="formQuestion1"&gt;Förnamn&lt;/p&gt;的值

那么你的代码就是

var dom = document.getElementById('formQuestion1');

1) var res = dom.innerText;

2) var res = dom.textContent;

3) var res = dom.firstChild.nodeValue;

【讨论】:

哦,好吧!谢谢,这正是我想要的(尽管我很不擅长解释)非常感谢,先生!

以上是关于在不使用 innerHTML 的情况下获取 <p> 的值的主要内容,如果未能解决你的问题,请参考以下文章

如何在不删除之前的 innerHTML 的情况下使用 innerHTML? [复制]

获取不在另一个标签内的元素的 InnerHTML

如何在不使用outerHTML的情况下在javascript中将标签作为文本? [复制]

如何在不使用while循环的情况下获取xml内容

Javascript - .innerHTML 更改自动关闭标签

如何在不复制的情况下从 N 维容器中获取可迭代范围?