js에서 간단한 게시 기능을 만드는 방법
- 小云云원래의
- 2018-03-17 16:58:511573검색
이 글은 주로 js에서 간단한 퍼블리싱 기능을 만드는 방법을 코드 형식으로 공유합니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.showMessage{
background-color: #ccc;
margin-top: 12px;
padding:20px;
border-radius: 8px;
}
</style>
</head>
<body>
<p class="container" style="padding-top:50px;">
<p class="col-md-3 message">
<input type="" class="form-control" name="" id="inpText" placeholder="请输入标题">
<textarea class="form-control" rows="10" style="margin-top: 20px" id="textaText" placeholder="请输入内容"></textarea>
<button class="btn btn-primary" style="margin-top:20px " id="button01">提交</button>
</p>
<p class="col-md-9 mainMessage" id="right">
<p class="showMessage">
<i>模板</i>
<h3 class="MT">标题</h3>
<p class="MC">这里是内容</p>
</p>
</p>
</p>
</body>
</html>js:
<script type="text/javascript">
window.onload = function(){
$('#button01').click(function(){
var inpText = document.getElementById('inpText').value;//获取值
var textaText = document.getElementById('textaText').value;//获取值
var right = document.getElementById('right');
var p = document.createElement('p');//创建一个p
p.className = 'showMessage';
var h3 = document.createElement('h3');//创建一个h3
h3.className = "MT";//设置类名
p.appendChild(h3);//将h3添加到p
h3.innerHTML = inpText;
var p = document.createElement('p');//创建一个p
p.innerHTML = textaText;
p.className = "MC";
p.appendChild(p);
right.appendChild(p);
})
}
</script>위의 js 부분을 관찰하세요.
var inpText = document.getElementById('inpText').value;//获取值 var textaText = document.getElementById('textaText').value;//获取值
이 두 줄의 코드는 다음 코드 앞에 놓일 수 없습니다.
$('#button01').click(function(){}앞에 두었다고 가정하고, 뒤에 페이지가 로드되면 다음 두 줄이 실행됩니다. 얻은 값은 비어 있으므로 클릭 기능에 배치되어야 합니다. 버튼이 클릭되었습니다. (여기에서는 코드를 작성하기 전에 이 두 태그에 값을 할당하지 않았다고 가정합니다.)
var inpText = document.getElementById('inpText').value;//获取值 var textaText = document.getElementById('textaText').value;//获取值
세 개의 태그가 생성되었습니다.
var p = document.createElement('p');//创建一个p var h3 = document.createElement('h3');//创建一个h3 var p = document.createElement('p');//创建一个p
는 HTML 노드에 추가되어야 합니다.
p.appendChild(h3);//将h3添加到p p.appendChild(p); right.appendChild(p);
또한 출시 후 추가, 삭제, 수정 사항을 검토할 수도 있습니다. 당신의 상상력을 사용하십시오. 마지막으로~글을 읽어주셔서 감사합니다~
위 내용은 js에서 간단한 게시 기능을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.