JavaScript添加、查找、删除元素的一个实例

时间：2022-04-05 05:00:39
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试文件</title>

<style>

.reply {

    width: 500px;

    height: 100%;

    overflow: hidden;

    background-color:#CCC;

    margin-top: 10px;

}

.infoArea {

    width: 380px;

    height: 100%;

    overflow: hidden;

}

.words {

    width: 380px;

    height: auto;

    margin: 5px 0px;

    float: left;

    font-size: 14px;

}

.time {

    margin-left: 10px;

    margin-bottom: 3px;

    width: 150px;

    height: 20px;

    line-height: 20px;

    float: left;

    font-family: 楷体;

    font-size: 14px;

    color: #999;

}

.replyButton {

    width: 60px;

    height: 20px;

    float: left;

    margin-bottom: 10px;

}

.replyButton input {

    font-size: 12px;

}

#cancelButton {

    visibility: hidden;

}

</style>

</head>

<body>

<div class="reply">

  <div class="infoArea">

    <div class="words"><a href="">*情报局</a>:*情报局</div>

    <div class="time">2014年5月4日21:56</div>

    <div class="replyButton">

      <input type="button"  id="submitButton" value="回复" onClick="showReplyArea(this)" />

    </div>

    <div class="replyButton">

      <input type="button"  id="cancelButton" value="取消" onClick="hideReplyArea(this)" />

    </div>

  </div>

</div>

<script>

//显示文本框的函数

function showReplyArea(src)

{

    inputText = document.createElement("DIV");

    inputText.className = "inputText";

    inputText.style.width = '100%';

    inputText.style.height = '75px';

    inputText.style.margin = '3px 0';

    inputText.style.cssFloat = 'left';

    var grandfather = src.parentNode.parentNode.parentNode;

    grandfather.appendChild(inputText);

    form1 = document.createElement("FORM");

    form1.action = "";

    form1.method = "post";

    inputText.appendChild(form1);

    inputTextArea = document.createElement("TEXTAREA");

    inputTextArea.style.width = '380px';

    inputTextArea.style.height = '40px';

    inputTextArea.style.marginLeft = '60px';

    inputTextArea.style.marginTop = '3px';

    inputTextArea.style.cssFloat = 'left';

    inputTextArea.style.resize = 'none';

    textSubmit = document.createElement("INPUT");

    textSubmit.type = 'submit';

    textSubmit.value = '提交';

    textSubmit.style.marginLeft = '80px';

    textSubmit.style.cssFloat = 'left';

    form1.appendChild(inputTextArea);

    form1.appendChild(textSubmit);

    cancelButton = grandfather.getElementsByTagName("INPUT").item(1);

    cancelButton.style.visibility = 'visible';

    submitButton = src;

    submitButton.disabled = true;

}

//隐藏文本框的函数

function hideReplyArea(src)

{

    var grandfather = src.parentNode.parentNode.parentNode;

    var inputText = grandfather.getElementsByClassName('inputText').item(0);

    grandfather.removeChild(inputText);

    cancelButton = src;

    cancelButton.style.visibility = 'hidden';

    submitButton = grandfather.getElementsByTagName("INPUT").item(0);

    submitButton.disabled = false;

}

//下面为调试时测试用函数，做完后就没用了，但也是很经典的一段代码，就留在这里了。

function showNode()

{

    var i = 4;

    submitButton = document.getElementById('submitButton');

    i = submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value;

    alert(i);

}

</script>

</body>

</html>

相关文章