<p id="loser">
<h1>Loser</h1>
<img id="loser-img" src="img/winner.png" alt=""/>
<p class="txt">
<textarea name="content" class="tt text" cols="23" rows="1" placeholder="想说点什么......"></textarea>
<p class="list-send">
<img src="img/tupian.png" alt=""/>
<a href="#" onClick="out()" >发布</a>
</p>
</p>
<p id="info-show">
<ul></ul>
</p>
</p>
<!--==========================winner========================-->
<p id="winner">
<h1>Winner</h1>
<img id="winner-img" src="img/loser.png" alt=""/>
<p class="txt">
<textarea name="content" class="tt texter" cols="23" rows="1" placeholder="想说点什么......"></textarea>
<p class="list-send">
<img src="img/tupian.png" alt=""/>
<a href="#" onClick="outer()" >发布</a>
</p>
</p>
<p id="info-shower">
<ol></ol>
</p>
</p>
<script type="text/javascript">
// 测试本地解析
//最新留言在上
function out() {
var oLi = document.createElement("li");
var oList = document.getElementById("info-show")[0];
var oUl = document.getElementsByTagName("ul", oList)[0];
var aLi = document.getElementsByTagName("li", oList);
var inputText = $('.text').val();
$('#info-show ul').append(reply(AnalyticEmotion(inputText)));
var html;
function reply(content) {
oLi.innerHTML =
"<p class='head-face'><img src='img/1.jpg'/></p>" +
"<p class='reply-cont'>" +
"<p class='username'>小小红飞机<span class='username-floor'>1[楼]</span></p>" +
" <xmp class='comment-body'>"+content+"</xmp> "+ //禁止留代码翻译,有空格回车<xmp>
"<form action='' class='comment-form'>" +
"<textarea id='comment-reply1' name='content-reply' cols='10' rows='20' placeholder='想说点什么......'></textarea>" +
"</form>" +
"<a href='#' class='comment-send'>回复</a >" +
"</p>";
return html;
}
aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);
}
function outer() {
var oLier = document.createElement("li");
var oLister = document.getElementById("info-shower")[0];
var oUler = document.getElementsByTagName("ol", oLister)[0];
var aLier = document.getElementsByTagName("li", oLister);
var inputText = $('.texter').val();
$('#info-shower ol').append(reply(AnalyticEmotion(inputText)));
var html;
function reply(content) {
oLier.innerHTML =
"<p class='head-face'><img src='img/1.jpg'/></p>" +
"<p class='reply-cont'>" +
"<p class='username'>小小红飞机<span class='username-floor'>1[楼]</span></p>" +
" <xmp class='comment-body'>"+content+"</xmp> "+ //禁止留代码翻译,有空格回车<xmp>
"<form action='' class='comment-form'>" +
"<textarea id='comment-reply1' name='content-reply' cols='10' rows='20' placeholder='想说点什么......'></textarea>" +
"</form>" +
"<a href='#' class='comment-send'>回复</a >" +
"</p>";
return html;
}
aLier.length ? oUler.insertBefore(oLier, aLier[0]) : oUler.appendChild(oLier);
}
</script>
运行错误报告
谢邀,我看了一下。应该是你那个aLier这个节点的问题
aLier这个变量,用
getElementsByTagName
这个方法获取dom,但它只接受一个参数, https://developer.mozilla.org... 你传个参进去没啥用。然后olier得到了document里面的所有li标签。。
然后insertBefore的第二个参数
referenceElement
是在这个节点中的已有节点。此时,这个olier已经不是ol这个里面的节点了,然后就报错了。修正方法是,把前面的申明这一坨搞清楚。
你这html代码里只有一个out函数啊
我看到楼主的info-show里面的内容是js动态生成的?你先打印一下你那个要添加的节点看看,能不能获取到,有可能是节点获取的错误导致的。实话说,楼主这demo有点晕啊,第一个out,是说把文本域的内容复制到下面info-show内?那第二个outer是几个意思?也是干这事的?那你两个加起来又是几个意思?没明白