HTML과 자바 스크립트를 사용하여 웹 페이지에 요소를 추가하려면 어떻게해야합니까?

현재 일부 HTML 및 자바 스크립트를 사용하여 의견 섹션을 만들었습니다.HTML과 자바 스크립트를 사용하여 웹 페이지에 요소를 추가하려면 어떻게해야합니까?

기본적으로 내가하고자하는 것은 textarea (기본 설정 : 입력을 누르면 제출, shift + 새 줄 입력) 또는 입력 유형 = 텍스트 (텍스트 상자에있는 내용을 모두 제출하는 형식)가있는 것입니다. 양식 아래의 단락 (또는 div 또는 심지어 다른 텍스트 영역)에 적용됩니다.

| ______ 안녕하세요 __________ | < - 텍스트 상자

댓글 아래 :

보도

를 입력 | ________________ | < - 아래 텍스트 상자

댓글 :

안녕하세요 여기

내가 지금까지하지만 작동하지 않은 코드입니다 :

<!DOCTYPE html> 
<html> 

<head> 

    <title>Comments Test</title> 
    <link href="mainstyles.css" rel="stylesheet" /> 
    <script src="mainjs.js"></script> 

</head> 

<body> 

    <form> 
     <input type="text" onsubmit="postComment(this)" /> 
     <p> 
      Comments Below: 
     </p> 
    </form> 




</body> 

</html>

function postComment(input) { 
    //Variable for the form 
    var form = input.parentElement; 
    //Variable for text input 
    var inputs = form.getElementsByTagName("input"); 
    //Variable for the value of the form and if condition met "then" do this if true "else" this if false 
    var response = inputs; 
    //Variables for creating a paragraph element and text per response 
    var node = document.createElement("p"), 
     textNode = document.createTextNode(response); 

    //Adding the response text to the paragraph and appending that to the bottom of the form 
    node.appendChild(textNode); 
    form.appendChild(node); 
}

출처

2014-12-19 user3029953

왜 당신은 이미 HTML에 정의 된 요소를 가진보다는 JS의 새로운 요소를 생성하고 단지 채우고 원하는 때를 보여? – im1dermike

@ im1dermike 아마도 그는 싫어하거나 그걸하는 법을 배우려하고 있습니다. – Rob

경우에 따라 나중에 시간을 절약 할 수 있습니다. 여러 줄이 가능하면 텍스트 영역으로 이동합니다. 나는 ''필드에 그들을 가질 수있는 방법을 모른다. 줄 바꿈 여부를 결정하려면 textarea에 'keypress'이벤트 리스너를 설정하고 키 코드가 입력되고 shift 키가 눌러지지 않으면'evt.preventDefault()'를 호출하십시오. – Katana314

당신에게 닫기 :

onsubmit 처리기를 양식 요소로 이동하십시오.
getElementsByTagName은 컬렉션을 반환합니다. 입력 값을 얻으려면 inputs[0].value을 사용하십시오.

발췌문

function postComment(input) { 
 
    //Variable for the form 
 
    var form = input.parentElement; 
 
    //Variable for text input 
 
    var inputs = form.getElementsByTagName("input"); 
 
    //Variable for the value of the form and if condition met "then" do this if true "else" this if false 
 
    var response = inputs[0].value; 
 

 
    //Variables for creating a paragraph element and text per response 
 
    var node = document.createElement("p"), 
 
     textNode = document.createTextNode(response); 
 

 
    //Adding the response text to the paragraph and appending that to the bottom of the form 
 
    node.appendChild(textNode); 
 
    form.appendChild(node); 
 
}

<form onsubmit="postComment(this); return false;"> 
 
    <input type="text"> 
 
    <p> 
 
    Comments Below: 
 
    </p> 
 
</form>

여기 입력 및 Shift 키를 사용하여 텍스트 영역이 작업을 수행 + 이 기준을 입력하는 방법은 다음과 같습니다

을

document.addEventListener("DOMContentLoaded", function(event) { 
 
    var form= document.querySelector('form'); 
 
    var textarea= document.querySelector('textarea'); 
 

 
    textarea.onkeypress= function(e) { 
 
    if(e.which === 13 && !e.shiftKey) { 
 
     this.parentNode.onsubmit(e); 
 
    } 
 
    } 
 

 
    form.onsubmit= function(e) { 
 
    var textarea = form.querySelector('textarea'); 
 
    var response = textarea.value; 
 
    var node = document.createElement('div'); 
 
    node.innerHTML= response.replace(/\n/g,'<br>') + '<hr>'; 
 
    form.appendChild(node); 
 
    textarea.value= ''; 
 
    e.preventDefault(); 
 
    } 
 
});

textarea { 
 
    width: 50%; 
 
    height: 5em; 
 
    float: left; 
 
} 
 

 
p { 
 
    clear: both; 
 
}

<form> 
 
    <textarea></textarea> 
 
    <input type="submit"> 
 
    <p> 
 
    Comments Below: 
 
    </p> 
 
</form>

출처

2014-12-19 20:35:21

고마워요! 그게 바로 제가 찾고 있던 것입니다. 나는 내가 가까웠다는 것을 알았다.:) – user3029953

음 ... 스 니펫에서 작동합니다. 이 페이지를 내 페이지에 구현하려고하면 작동하지 않습니다. 텍스트 영역은 아무 것도 제출하지 않습니다 (버튼을 누르거나 Enter 키를 누르십시오 ... Enter 키를 누르면 새 라인이 생기고 버튼을 클릭하면 모든 것이 지워집니다). 입력 된 텍스트가 주석 섹션에 빠르게 깜박이고 새로 고침 한 것처럼 사라집니다. – user3029953

두 번째 발췌 문장을 언급하고 있다고 가정합니다. 이제'preventDefault'를'onsubmit' 핸들러로 옮겼습니다. IE에서 이것을 실행하고 있다면 다음 줄을 추가해야 할 것입니다 :''과' –

HTML과 자바 스크립트를 사용하여 웹 페이지에 요소를 추가하려면 어떻게해야합니까?

답변

관련 문제