Google HTML 서비스 - 동적 양식

Question

Google App Script 플랫폼을 사용하여 양식을 만들고 UI의 버튼을 눌러 요소를 동적으로 추가하려고합니다. 어떻게해야합니까?

<form id="myForm"> 
    Name <input name="myName" type="text" /><br/><br/> 
    Address <input name="myAddress" type="text" /><br/><br/> 
    <input type="button" value="Add element" onclick="google.script.run.withSuccessHandler(addElement)" /> 
    <input type="button" value="submit" onclick="google.script.run.withSuccessHandler(showData).processForm(this.form)" /> 
</form> 
<div id="output"></div> 
<script> 
function addElement(){ 
    document.getElementById('myForm').append("input"); 

} 

function showData(data){ 
    var div = document.getElementById('output'); 
    div.innerHTML = '<p>' + data + '</p>'; 
} 
</script> 

여기 Code.gs

function doGet() { 
    return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.NATIVE); 
} 

function processForm(formObject){ 
    Logger.log(formObject); 
    return formObject; 
} 

도움을

감사하다

index.html을 : 여기 내 코드입니다!

Answer 1

대신 스크립트 태그의 기능의 구글 서버 측 기능을 요구하고있다 : 당신이 대략 알 수 있도록 내가, 당신이 innerHTML 사용하는 것을 볼 수

<input type="button" value="Add element" onclick="addElement()" /> 

:

<input type="button" value="Add element" onclick="google.script.run.withSuccessHandler(addElement)" /> 

가되어야한다 그. 당신이 요소 개체에 사용할 수없는 방법 (추가)를 사용하려고 같은

Mozilla Documentation

는 것 같습니다. UI 메소드를 DOM (Document Object Model)과 혼동하는 것일 수 있습니다.

appendChild method - Microsoft Documentation

이있다 : 또한 appendChild 방법이

function addElement(){ 
    document.getElementById('myForm').innerHTML = "<input type='text' id='inputTwo'>"; 
} 

: 당신이 입력 태그를 추가하려면

Document Object Model

는, 다음과 같이 사용할 수 있습니다 또한 createElement 방법 :

createElement Method - Mozilla Documentation

따라서 Document 개체 나 Element 개체를 사용할 수 있습니다. 문서 객체의 방법은 다음과 같습니다

• document.createElement()
• document.removeChild()
• document.appendChild를()
• document.replaceChild()