Javascript 替换文本节点_Javascript_Css_Forms_Dom

Javascript 替换文本节点

javascript css forms dom

Javascript 替换文本节点,javascript,css,forms,dom,Javascript,Css,Forms,Dom,我正在尝试将这两个文本节点相互替换。它应该像一个更正验证。它应该做的是，在你关注另一个输入之后，看看输入是否正确这是html <body> <form action="" method="post" name="myform"> <fieldset> <legend>Lab Group Form</legend> <label for="first_name

我正在尝试将这两个文本节点相互替换。它应该像一个更正验证。它应该做的是，在你关注另一个输入之后，看看输入是否正确

这是html

<body>
<form action="" method="post" name="myform">
        <fieldset>
            <legend>Lab Group Form</legend>
                <label for="first_name">First Name:</label>
                <br/>
            <input id="first_name" type="text" name="first_name_text" value="" onblur="validatefirst()" />
                    <br/><br/>
          </fieldset>
</form> 

 <div class="one" id="one"/>
 <div class="two" id="two"/>
</body>



    function validatefirst() {
        if (document.myform.first_name.value.length > 0) {
            var one = document.createTextNode("Correct");
            var one_container = document.getElementById("one");

        } else {
            var two = document.createTextNode("Incorrect.");
            var two_container = document.getElementById("two");
            two_container.appendChild(two);
        }
    }

如果你能帮我，那就太好了。请不要用jquery。谢谢你

我不太清楚你想用函数中的函数实现什么。以下内容会起作用，但不确定这是否是您想要的：


<html>
<head>
<style>
.one { 
    color:#000; 
    position:absolute; 
    top:200px;
}


.two{ 
    color:#000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    position: absolute; 
    top:200px; 
} 
</style>
</head>
<body>
<form action="" method="post" name="myform">
        <fieldset>
            <legend>Lab Group Form</legend>
                <label for="first_name">First Name:</label>
                <br/>
            <input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
                    <br/><br/>
          </fieldset>
</form> 

 <div class="one" id="one"/>
 <div class="two" id="two"/>
</body>
<script>
    function validatefirst() {
        if (document.getElementById("first_name").value.length > 0) {
            var one = document.createTextNode("Correct");
            var one_container = document.getElementById("one");
            one_container.appendChild(one);
        } else {
            var two = document.createTextNode("Incorrect.");
            var two_container = document.getElementById("two");
            two_container.appendChild(two);
        }
    }
</script>
</body>
</html>


.1{
颜色：#000；
位置：绝对位置；
顶部：200px；
}
.2{
颜色：#000；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
位置：绝对位置；
顶部：200px；
} 
实验小组表格
名字：





函数validatefirst（）{
if（document.getElementById（“first_name”）.value.length>0）{
var one=document.createTextNode（“正确”）；
var one_container=document.getElementById（“一”）；
一个容器。一个子容器（一个）；
}否则{
var two=document.createTextNode（“不正确”）；
var two_container=document.getElementById（“两个”）；
两个容器。附加子容器（两个）；
}
}

在开始脚本之前，字段集和两个div都需要结束标记。


<html>
<head>
<style>
.one { 
    color:#000; 
    position:absolute; 
    top:200px;
}


.two{ 
    color:#000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    position: absolute; 
    top:200px; 
} 
</style>
</head>
<body>
<form action="" method="post" name="myform">
        <fieldset>
            <legend>Lab Group Form</legend>
                <label for="first_name">First Name:</label>
                <br/>
            <input id="first_name" type="text" name="first_name_text" onchange="validatefirst()" />
                    <br/><br/>
          </fieldset>
</form> 

 <div class="one" id="one"/>
 <div class="two" id="two"/>
</body>
<script>
    function validatefirst() {
        if (document.getElementById("first_name").value.length > 0) {
            var one = document.createTextNode("Correct");
            var one_container = document.getElementById("one");
            one_container.appendChild(one);
        } else {
            var two = document.createTextNode("Incorrect.");
            var two_container = document.getElementById("two");
            two_container.appendChild(two);
        }
    }
</script>
</body>
</html>