[JQUERY] document.write를하지 않고 HTML 페이지에 자바 스크립트 변수를 표시하는 방법

document.write를하지 않고 HTML 페이지에 자바 스크립트 변수를 표시하는 방법

해결법

1. ---

   1.Element.innerHTML 꽤 많이 갈 수있는 방법입니다. 여기를 사용하는 몇 가지 방법은 다음과 같습니다 :

   Element.innerHTML 꽤 많이 갈 수있는 방법입니다. 여기를 사용하는 몇 가지 방법은 다음과 같습니다 :

   <div class="results"></div>
   

   // 'Modern' browsers (IE8+, use CSS-style selectors)
   document.querySelector('.results').innerHTML = 'Hello World!';
   
   // Using the jQuery library
   $('.results').html('Hello World!');
   

   당신은 단지 값 또는 같은 클래스와

   나는 대개 추가 빈 요소의 일부를 업데이트하려면 나는

   메인에의 내용을 대체합니다. 예를 들면

   <div class="content">Hello <span class='value'></span></div>
   

   그럼이 같은 일부 코드를 사용하십시오 :

   // 'Modern' browsers (IE8+, use CSS-style selectors)
   document.querySelector('.content .value').innerHTML = 'World!';
   
   // Using the jQuery library
   $(".content .value").html("World!");
   

   그런 다음 HTML / DOM 이제 포함됩니다 :

   <div class="content">Hello <span class='value'>World!</span></div>
   

   // 일반 자바 스크립트 예제 VAR $ jsName = document.querySelector ( '이름입니다.'); VAR $ jsValue = document.querySelector ( 'jsValue.'); $ jsName.addEventListener ( "입력", 함수 (이벤트) { $ jsValue.innerHTML = $ jsName.value; } 거짓); // JQuery와 예 VAR $ jqName = $ ( '이름입니다.'); VAR $ jqValue = $ ( '. jqValue'); $ jqName.on ( "입력", 함수 (이벤트) { $ jqValue.html ($ jqName.val ()); }); HTML { 글꼴 - 가족 : 산세 리프; 폰트 사이즈 : 16px; } H1 { 마진 : 1em 0 0.25em 0; } 입력 [TYPE = 텍스트] { 패딩 : 0.5em; } .jsValue, .jqValue { 색상 : 빨강; } <스크립트 SRC = "https://code.jquery.com/jquery-1.11.3.js"> <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭"> <제목> HTML 콘텐츠 설정 예 필드는 내가에서 이름을 얻고있는 곳입니다 -> <레이블> 당신의 이름을 입력 : <입력 클래스 = "이름"유형 = "텍스트"값 = "세계"/>

   일반 자바 스크립트 예제 안녕하세요 <스팬 클래스 = "jsValue"> 세계

   jQuery를 실시 예 헬로 <스팬 클래스 = "jqValue"> 세계

2. ---

   2.당신은 페이지에 액세스 요소에 자바 스크립트 사용 및 그 내용을 수정할 수 있습니다. 그래서 예를 들어, 당신은 그래서 같은 일부 HTML 마크 업이있는 페이지가있을 수 있습니다 :

   당신은 페이지에 액세스 요소에 자바 스크립트 사용 및 그 내용을 수정할 수 있습니다. 그래서 예를 들어, 당신은 그래서 같은 일부 HTML 마크 업이있는 페이지가있을 수 있습니다 :

   <div id="MyEdit">
       This text will change
   </div>
   

   당신과 같이 내용을 변경하는 자바 스크립트 사용할 수 있습니다 ...

   document.getElementById("MyEdit").innerHTML = "My new text!";​
   

   다음은 작업 예입니다

   당신은 또한 아주 쉽게 이런 일을하기 위해 몇 가지 좋은 기능을 가지고 있습니다, DOM 조작에 대한 JQuery와 자바 스크립트 라이브러리를 사용하여 볼 수 있습니다.

   예를 들어, JQuery와 함께, 당신은 동일한 결과를 달성하기 위해이 작업을 수행 할 수 ...

   $("#MyEdit").html("My new text!");
   

   여기 JQuery와 버전의 작업 예입니다

   당신이 게시물에 제공이 예를 기준으로합니다. 다음 JQuery와 당신을 위해 작동합니다 :

   var x = "hello wolrd";
   $("p").html(x);
   

   다음 작업 버전입니다

   그러나이 같은 P 태그를 사용하지 않는 것이 좋습니다. 당신은 이상적으로 당신은 당신이 JQuery와 함께 올바른 하나를 선택하는 보장 할 수 있도록 고유 한 ID를 가진 요소를 사용하고자하는 것입니다.

3. ---

   3.이 일을 다른 방법이 있습니다. 한 가지 방법은 명령을 검색하는 스크립트를 작성하는 것입니다. 그래서 같은 :

   이 일을 다른 방법이 있습니다. 한 가지 방법은 명령을 검색하는 스크립트를 작성하는 것입니다. 그래서 같은 :

   var name="kieran";
   document.write=(name);
   

   또는 우리는 그것을 인쇄 기본 자바 스크립트 방법을 사용할 수 있습니다.

   var name="kieran";
   document.getElementById("output").innerHTML=name;
   
   and the html code would be: 
   
   <p id="output"></p>
   

   나는 희망이 도움 :)

4. ---

   4.당신이 값을로드 할 것을 당신은 HTML 요소를 잡아 JQuery와 사용할 수 있습니다.

   당신이 값을로드 할 것을 당신은 HTML 요소를 잡아 JQuery와 사용할 수 있습니다.

   페이지가이 같은 형태의 경우, 예를 들어 말

   <div id="FirstDiv">
     <div id="SecondDiv">
        ...
     </div>
    </div>
   

   그리고 당신의 자바 스크립트 (I 희망)이 단순하게 뭔가를 보이는 경우,

   function somefunction(){
     var somevalue = "Data to be inserted";
     $("#SecondDiv").text(somevalue);
   }
   

   나는 이것이 당신이 찾고 있던 무슨 바랍니다.

5. ---

   5.당신이 innerHTML을하지 않도록하려는 경우 요소를 구성하고, 페이지를 추가하기 위해 DOM 방법을 사용할 수 있습니다.

   당신이 innerHTML을하지 않도록하려는 경우 요소를 구성하고, 페이지를 추가하기 위해 DOM 방법을 사용할 수 있습니다.

   ​var element = document.createElement('div');
   var text = document.createTextNode('This is some text');
   element.appendChild(text);
   document.body.appendChild(element);​​​​​​
   

6. ---

   6.innerHTML을 잘 여전히 유효합니다. 그것을 크고 작은 프로젝트에있는 모든 시간을 사용합니다. 난 그냥 내 IDE에서 열린 탭으로 이성을 상실하고 바로 거기에 하나가 있었다.

   innerHTML을 잘 여전히 유효합니다. 그것을 크고 작은 프로젝트에있는 모든 시간을 사용합니다. 난 그냥 내 IDE에서 열린 탭으로 이성을 상실하고 바로 거기에 하나가 있었다.

    document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";
   

   아니 훨씬 더 라이브러리의 추가가 아닌, 2005 년부터 JS + DOM 조작으로 변경되었습니다. 당신은 쉽게 같은 다른 속성을 설정할 수 있습니다

      uploadElement.style.width = "100%";
   

7. ---

   7.하이 여기 간단한 예이다 :

   콘텐트 및

   하이 여기 간단한 예이다 :

   콘텐트 및

   var test = 5;
   document.getElementById('test').innerHTML = test;
   

   당신은 여기를 테스트 할 수 http://jsfiddle.net/SLbKX/

8. ---

   8.그 DIV에 (예 : 사업부 등) 페이지 및 쓰기에 요소를 추가합니다.

   그 DIV에 (예 : 사업부 등) 페이지 및 쓰기에 요소를 추가합니다.

   HTML :

   <html>
       <header>
           <title>Page Title</title>
       </header>
   
       <body>
           <div id="myDiv"></div>
       </body>
   </html>
   

   jQuery를 :

   $('#myDiv').text('hello world!');
   

   자바 스크립트 :

   document.getElementById('myDiv').innerHTML = 'hello world!';
   

9. ---

   9.위의 유사하지만 내가 사용 (이 CSHTML에 있었다)

   위의 유사하지만 내가 사용 (이 CSHTML에 있었다)

   자바 스크립트 :

   var value = "Hello World!"<br>
   $('.output').html(value);
   

   CSHTML :

   <div class="output"></div>
   

from https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write by cc-by-sa and MIT license