span and innerHTML

span

span의 사용법에 대해서 알아 본다.
문자열 일 부분을 꾸밀때는 span을 사용한다.

<span style='color:blue;'>그대의 창문은</span>처럼 문자열 컬러를 파란색으로 꾸며주고 있다.

한 송이 장미를 종이에 곱게싸서

어제도 오늘도 하루같이 기다리네 그대의 창문은 열릴줄 모르니

innerHTML

innerHTML은 레이아웃의 변화를 줄수 있지만 textContent는 변화를 줄수가 없다.
innerHTML을 사용하면 이전 스타일이 제거 되는줄 알았다.
예전 그타일이 그대로 유지가 된다.

var el = document.getElementById('id_text');
el.innerHTML = "<p>백 송이 장미<img src='rose.png' style='width:30px; height:50px'>를 </p>"
+ "<p>어제도 오늘도 하루같이 기다리네 <span style='color:blue;'>그대의 마음은</span> 열릴줄 모르니</P>";

innerHTML을 사용 했을때 "mid-content" 클래스의 영향을 받아서 화면 중간에 표시한다.

span_innerHTML.html 테스트

innerHTML로 요소 생성 방법

다음과 같은 구문을 innerHTML을 이용해 HTML 요소를 생성해 보자.

'<h1 id="name" style="color: blue;">홍길동</h1>'

방법1)
"+=" 대신 "=" 대입문을 사용하면 모든 html이 사라져 버리니 주의해야 한다.

document.body.innerHTML += '<h1 id="name" style="color: blue;">홍길동</h1>';

방법2)

var el = document.createElement('h1');
el.id = 'name';
el.style.cssText = "color: blue;";
el.innerHTML = "홍길동";
document.body.appendChild(el);

결과

잘못된 방법)

var el = document.createElement('h1');
el.innerHTML = '<h1 id="name" style="color: blue;">홍길동</h1>';
document.body.appendChild(el);

결과) 자식으로 h1이 하나 더 만들어지고 있다.

innerHTML로 CSS 추가하기

스타일 요소를 ID를 이용해 추가 제거 할수 있다.

function writeStyles(styleNameId, cssText) {
    var styleElement = document.getElementById(styleNameId);
    if (styleElement)
        document.getElementsByTagName('head')[0].removeChild(styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleNameId;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

//사용법: "myHeight"라는 id로 클래스를 추가하고 있다.
var cssText = '.testDIV { height: 100px; }';
writeStyles( 'myHeight', cssText);

참고)
How to dynamically create CSS class in JavaScript and apply?
https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply