document.write없이 HTML 페이지에 JavaScript 변수를 표시하는 방법
내 HTML 페이지에 일부 JavaScript 변수를 표시하려고합니다.
처음 사용 document.write()했지만 함수가 호출 될 때 현재 페이지를 덮어 쓰는 데 사용됩니다.
주위를 둘러 본 후, 일반적인 합의 document.write()는 그다지 좋아하지 않는다는 것입니다. 다른 옵션은 무엇입니까?
사용을 제안하는 페이지를 찾았 .innerHTML지만 2005 년에 작성되었습니다.
내 문제를 보여주는 jsFiddle http://jsfiddle.net/xHk5g/
Element.innerHTML갈 길이 멀다. 사용 방법은 다음과 같습니다.
HTML
<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>일반적으로 클래스와 같은 빈 요소를 추가 value하거나 내용을 main으로 바꾸고 싶습니다 <div>. 예 :
<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>
전체 예. 스 니펫 실행을 클릭하여 사용해보세요.
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
// JQuery example
var $jqName = $('.name');
var $jqValue = $('.jqValue');
$jqName.on('input', function(event){
$jqValue.html($jqName.val());
});html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Setting HTML content example</title>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
</body>
</html>javascript를 사용하여 페이지의 요소에 액세스하고 해당 내용을 수정할 수 있습니다. 예를 들어 다음과 같은 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가 작동합니다.
var x = "hello wolrd";
$("p").html(x);
Using a P tag like this however is not recommended. You would ideally want to use an element with a unique ID so you can ensure you are selecting the correct one with JQuery.
there are different ways of doing this. one way would be to write a script retrieving a command. like so:
var name="kieran";
document.write=(name);
or we could use the default JavaScript way to print it.
var name="kieran";
document.getElementById("output").innerHTML=name;
and the html code would be:
<p id="output"></p>
i hope this helped :)
You could use jquery to get hold of the html element that you want to load the value with.
Say for instance if your page looks something like this,
<div id="FirstDiv">
<div id="SecondDiv">
...
</div>
</div>
And if your javascript (I hope) looks something as simple as this,
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}
I hope this is what you were looking for.
If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page.
var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);
innerHTML is fine and still valid. Use it all the time on projects big and small. I just flipped to an open tab in my IDE and there was one right there.
document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";
Not much has changed in js + dom manipulation since 2005, other than the addition of more libraries. You can easily set other properties such as
uploadElement.style.width = "100%";
hi here is a simple example: <div id="test">content</div> and
var test = 5;
document.getElementById('test').innerHTML = test;
and you can test it here : http://jsfiddle.net/SLbKX/
Add an element to your page (such as a div) and write to that div.
HTML:
<html>
<header>
<title>Page Title</title>
</header>
<body>
<div id="myDiv"></div>
</body>
</html>
jQuery:
$('#myDiv').text('hello world!');
javascript:
document.getElementById('myDiv').innerHTML = 'hello world!';
Similar to above, but I used (this was in CSHTML):
JavaScript:
var value = "Hello World!"<br>
$('.output').html(value);
CSHTML:
<div class="output"></div>
'program tip' 카테고리의 다른 글
| 클래스 이름에 점 (.)으로 요소 스타일 지정 (0) | 2020.12.04 |
|---|---|
| mysql 결과를 두 번 확인하는 방법은 무엇입니까? (0) | 2020.12.04 |
| 배열로 파일 이름 읽기 (0) | 2020.12.04 |
| Mac에 설치 한 후 git gui가 작동하지 않음 (예 : Mountain Lion) (0) | 2020.12.04 |
| 방법과 기능의 차이점은 무엇입니까? (0) | 2020.12.04 |