JavaScript學習筆記7 DOM為指定元素插入子元素的方法

書中提供了一個小的案例來講述DOM控制頁面節(jié)點樹的方法,我將這個過程比較詳細的寫了一遍,確實很實用!雖然使用方法比innerHTML繁瑣些比然,但是可以非常精確控制每一個節(jié)點的位置万俗,還可以把這個節(jié)點做成一個全局變量(這個是我看到這里自己總結的,應該是成立的)库倘,以后隨時可以調用!

下面內容包括代碼,我都是在markdown編輯器下手敲的彪笼,目的是為了在這個過程中,能再寫一遍代碼,對這些代碼能加深印象

如果文字敲錯了大家就當沒看見,代碼敲錯了我相信能看出來的不會看我這種小白的blog系忙,看不出來復制過去報錯的洁墙,請留言哈捺弦。

createElement方法

createElement方法是在頁面中創(chuàng)建一個新的元素幽崩,但這個元素是沒有父元素的,它只是游蕩在這個腳本中理郑,不會被頁面顯示出來但實際上是存在的类缤。
格式:

document.createElement(nodeName);

例如在一個空的HTML文件中創(chuàng)建一個元素p:

<script type="text/javascript">
document.createElement("p");
</script>

書中講到,創(chuàng)建了一個元素后把它賦值給一個變量是一個不錯的選擇,這樣方便后續(xù)調用:

<script type="text/javascript">
var para = document.createElement("p");
</script>

appendChild方法

這個方法可以把createElement創(chuàng)建的元素插入頁面中某個指定的元素節(jié)點下氓扛,使其成為這個元素的子節(jié)點枯芬。

格式:parent.appendChild(child);

例子:

<div id="testdiv">
</div>

上面這個HTML是一個空的ID為testdiv的div,我想將上面創(chuàng)建的那個P元素插入這個div中:

<div id="testdiv">
</div>

<script type="text/javascript">
var para = document.createElement("p");
document.getElementById("testdiv").appendChild(para);
</script>

得到的結果是(我在瀏覽器中F12截圖的):



可以看到采郎,這個空的P標簽已經(jīng)成功插入到ID為testdiv的div標簽下千所,成為它的子元素了。但這么寫我覺得有點太長了蒜埋,可以換成下面的寫法:

<div id="testdiv">
</div>

<script type="text/javascript">
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
</script>

個人覺得這種寫法更容易調試代碼淫痰,靈活性更高些!

切記:parent.appendChild(child);中的child是不帶引號的整份,因為我在上面已經(jīng)把這個元素存入了一個變量中待错,我在寫的時候就因為這個問題,撒潑打滾的一個字一個字的對著書本的代碼查了好半天才反應過來烈评。

當然火俄,我是小白才會因為這種基礎的常識問題卡住,大神們請直接忽略讲冠!

createTextNode方法

上面講的使用createElement創(chuàng)建一個空的元素p瓜客,并用appendChild插入了指定的div中,現(xiàn)在就可以使用createTextNode來為這個p元素創(chuàng)建內容,創(chuàng)建的形式也是和createElement一樣忆家,出來的也是一個浮游的文本元素犹菇。

格式:document.createTextNode(text);

例如:

document.createTextNode("This is mt blog!");
//var text = document.createTextNode("This is mt blog!");
//我一般習慣在創(chuàng)建元素的時候馬上賦值給一個變量,方便后面使用

文本內容創(chuàng)建好了之后芽卿,就可以再使用appendChild方法揭芍,插入到p標簽下了:

var text = document.createTextNode("This is mt blog!");
para.appendChild(text);

整個過程完整的代碼如下:

<div id="testdiv">
    
</div>

<script type="text/javascript">
//創(chuàng)建一個空的p元素并賦值給變量para
var para = document.createElement("p");

//找到指定的id的div
var testdiv = document.getElementById("testdiv");

//將這個para插入到指定的div下
testdiv.appendChild(para);

//創(chuàng)建一個文本元素,值為:This is my blog
var text = document.createTextNode("This is my blog!");

//將這個文本元素插入到p標簽下
para.appendChild(text);
</script>

最終的顯示結果如下:


排版需要卸例,我把瀏覽器放大了称杨,實際上的This is my blog!顯示出來是默認的字號和字體!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末筷转,一起剝皮案震驚了整個濱河市姑原,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌呜舒,老刑警劉巖锭汛,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異袭蝗,居然都是意外死亡唤殴,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門到腥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來朵逝,“玉大人,你說我怎么就攤上這事乡范∨涿” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵晋辆,是天一觀的道長渠脉。 經(jīng)常有香客問我,道長栈拖,這世上最難降的妖魔是什么连舍? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮涩哟,結果婚禮上索赏,老公的妹妹穿的比我還像新娘。我一直安慰自己贴彼,他們只是感情好潜腻,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著器仗,像睡著了一般融涣。 火紅的嫁衣襯著肌膚如雪童番。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天威鹿,我揣著相機與錄音剃斧,去河邊找鬼。 笑死忽你,一個胖子當著我的面吹牛幼东,可吹牛的內容都是我干的。 我是一名探鬼主播科雳,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼根蟹,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了糟秘?” 一聲冷哼從身側響起简逮,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎尿赚,沒想到半個月后散庶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡吼畏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年督赤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泻蚊。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖丑婿,靈堂內的尸體忽然破棺而出性雄,到底是詐尸還是另有隱情,我是刑警寧澤羹奉,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布秒旋,位于F島的核電站,受9級特大地震影響诀拭,放射性物質發(fā)生泄漏迁筛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一耕挨、第九天 我趴在偏房一處隱蔽的房頂上張望细卧。 院中可真熱鬧,春花似錦筒占、人聲如沸贪庙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽止邮。三九已至这橙,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間导披,已是汗流浹背屈扎。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留撩匕,地道東北人鹰晨。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像滑沧,于是被迫代替她去往敵國和親并村。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內容