JavaScript建立元素

Background：為了自定義部落格園導航欄的選單。

使用js建立元素節點

//建立<a>元素，並新增id，class，href的屬性
var element_a = document.createElement("a");
var element_a_id = document.createAttribute("id");          element_a_id.value="about_me";
var element_a_class = document.createAttribute("class");    element_a_class.value="menu";
var element_a_href = document.createAttribute("href");      element_a_href.value="http://heyunxiong.com";

element_a.setAttributeNode(element_a_id);
element_a.setAttributeNode(element_a_class);
element_a.setAttributeNode(element_a_href);
// <a>顯示的文字
element_a.innerHTML = "About Me";	

// 建立<li> 列表元素，並設定id屬性
var new_element_li_1 = document.createElement("li");
var new_element_li_1_id = document.createAttribute("id");     new_element_li_1_id.value="add_nav_li";
new_element_li_1.setAttributeNode(new_element_li_1_id);
// 然後把剛才建立的<a>元素以子元素的形式新增到<li>中
new_element_li_1.appendChild(element_a);


// 對應的也有刪除的方法
//parent_navList.removeChild(blog_nav_sitehome);
 

上述程式碼的形式效果：

<li id = "add_nav_li">
	<a id="about_me" class="menu" href="http://heyunxiong.com">About Me</a>
</li>

新增新元素到已有元素上

//先設定要建立的元素，然後直接新增

//比如想要新新增的元素如下：（當然，也可以用上面說的方法，使用純js拼成下面的形式）
<li id = "add_nav_li">
	<a id="about_me" class="menu" href="http://heyunxiong.com">About Me</a>
</li>

// 新增到已有元素ul上, 相當於在無須列表中添加了一個新的項
var new_element_ul = document.getElementById("ul"); //獲取到已有元素ul
new_element_ul.appendChild(add_nav_li); // 把li新增到ul裡面，
 

修改元素屬性

//獲取元素，修改屬性。
// 修改id屬性的值
document.getElementById("navList").id="navList_obs";
// 修改css樣式，相當於 #blog_nav_sitehome{display：none}
document.getElementById("blog_nav_sitehome").style.display = "none";

實際使用

針對需求，自定義導航欄上的資訊；在部落格園的設定進行了一些程式碼修改。

定製CSS程式碼：

/* 隱藏整個導航欄 */
/* #navigator{display:none;} */

/* 隱藏導航欄的選單欄 */
/* #navList{display: none;} */
/* 隱藏自帶的官方頂部導航欄 */
#top_nav{display: none;}

/* 隱藏博文資料顯示 */
.blogStats{display: none;}
/* 隱藏單篇博文底部推薦、新聞文章塊 */
#under_post_card1{display:none;}
#under_post_card2{display:none;}
#cnblogs_c1{display: none;}
#cnblogs_c2{display: none;}

/* 隱藏廣告快 */
#ad_t2{display: none;}

/* 隱藏點贊分享，太醜了 */
#blog_post_info{display: none;}

/* 修改評論框的高度，太高不協調 */
#tbCommentBody{height: 100px;}
#tbCommentBodyPreview{height: auto;}

/* 隱藏指定導航爛的選單欄特定元素，以便新增自己想要的其他元素 */
a#blog_nav_sitehome{display: none;}
a#blog_nav_myhome{display: none;}
a#blog_nav_newpost{display: none;}
a#blog_nav_contact{display: none;}
a#blog_nav_rss{display: none;}
a#blog_nav_admin{display: none;}

/* 隱藏公告下面的一些粉絲關注資訊，完全沒必要顯示對我來說 */
#profile_block{display: none;}
#p_b_follow{display: none;}


 

側邊欄公告：

主要是為了放一個頭像 ：）

<img id="mypic" src="https://img2020.cnblogs.com/blog/914318/202110/914318-20211006170609278-1378141535.jpg" alt="Yunxiong" loading="lazy">

頁首程式碼：

<script type="text/javascript">

//新增一個新的關於我導航節點
var element_a = document.createElement("a");
var element_a_id = document.createAttribute("id");          element_a_id.value="about_me";
var element_a_class = document.createAttribute("class");    element_a_class.value="menu";
var element_a_href = document.createAttribute("href");      element_a_href.value="http://heyunxiong.com";

element_a.setAttributeNode(element_a_id);
element_a.setAttributeNode(element_a_class);
element_a.setAttributeNode(element_a_href);
element_a.innerHTML = "About Me";	

var new_element_li_1 = document.createElement("li");
var new_element_li_1_id = document.createAttribute("id");     new_element_li_1_id.value="add_nav_li";
new_element_li_1.setAttributeNode(new_element_li_1_id);
new_element_li_1.appendChild(element_a);


var element_navList = document.getElementById("navList");
element_navList.appendChild(new_element_li_1);

</script>

效果圖：

參考資料：

JavaScript HTML DOM - 改變CSS

通過JS指令碼修改文字,

JavaScript HTML DOM 元素 (節點)