DOM程式設計案例——innerHTML innerText操作div和span、去除字串的前後空白trim

阿新 • • 發佈：2020-12-22

技術標籤：D_JavaWeb階段 D2_JavaScript javascript

1.innerHTML innerText操作div和span

innerText和innerHTML屬性什麼區別？
相同點： 都是設定元素內部的內容。
不同點：
innerHTML會把後面的 “字串”當做一段HTML程式碼解釋並執行。
innerText，即使後面是一段HTML程式碼，也只是將其當做普通的字串來看待。

<body>
<style type="text/css">
    #div1{
        background-color: #abacff; 

        width: 200px;
        height: 200px;
        boder:1px solid black;
        position: absolute;
        top:50px;
        left:50px;
    }
</style>
<script type="text/javascript">

    window.onload = function () {
        document.getElementById("btn").onclick = function 
 () {
            var divElt = document.getElementById("div1");
            // divElt.innerHTML = "ssssssssssssss";
              
            // divElt.innerHTML = "<font color='red'>使用者名稱不能為空!</font>";
			
            divElt.innerText = "<font color='red'>使用者名稱不能為空!</font>" 
;
       
        }
    }
</script>
<input type="button" id="btn" value="設定div中的內容"/>
<div id="div1"></div>
</body>

在這裡插入圖片描述

2.去除字串的前後空白trim

<head>
    <meta charset="UTF-8">
    <title>004-去除字串的前後空白trim</title>
</head>
<body>
<script type="text/javascript">
    // 低版本的IE瀏覽器不支援字串的trim()函式,怎麼辦？
    // 可以自己對String類擴充套件一個全新的trim()函式!
    String.prototype.trim = function () {
        // alert("擴充套件之後的trim方法");
        // 去除當前字串的前後空白
        // 在當前的方法中的this代表的就是當前字串.
        //return this.replace(/^\s+/, "").replace(/\s+$/, "");
        return this.replace(/^\s+/,"").replace(/\s+$/,"");
    }
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var oldValue = document.getElementById("username").value;
            var newValue = oldValue.trim();
            alert("--->" + newValue + "<---");
        }
    }
</script>
<input type="text" id="username"/>
<input type="button" id="btn" value="獲取使用者名稱"/>
</body>

DOM程式設計案例——innerHTML innerText操作div和span、去除字串的前後空白trim

技術標籤：D_JavaWeb階段D2_JavaScriptjavascript 1.innerHTML innerText操作div和span innerText和innerHTML屬性什麼區別？相同點：都是設定元素內部的內容。不同點： innerHTML會把後面的 “字串”當做一段

DOM程式設計之innerHTML和innerText操作div和span

innerHTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

JS-DOM程式設計-02-innerHTML和innerText屬性

JS-DOM程式設計-02-innerHTML和innerText屬性 1.innerHTML屬性 innerHTML屬性可以設定物件裡的內容。

HTML中的div和span

div和span 1、div和span都可以稱為“圖層“。 2、圖層的作用是為了保證頁面可以靈活的佈局。相當於“盒子”。

python字串的常見操作字串的下標和索引、獲取字串的長度、字串的查詢、和字串相關的判斷、字串的內容分割 strip、join和split的使用

技術標籤：python字串字串的下標和索引、獲取字串的長度、字串的查詢、字串的判斷、字串的內容分割

Web前端開發筆記-----6.div和span，css基礎語法和引入方式，顏色表示法，背景樣式，邊框樣式

Web前端開發筆記-----6.div和span,css基礎語法和引入方式文章目錄 Web前端開發筆記-----6.div和span,css基礎語法和引入方式一、div和span二、css基礎1.css基礎語法2.css樣式的引入方式a.內聯樣式和內部樣式b

操作檔案和目錄、序列化

1.通過os模組和os.path模組可以清楚的瞭解自己的Python模組 2.通過語句os.name查詢自己電腦的作業系統

SQL：char 和 varchar、binary 和 varbinary、二進位制字串、嚴格模式、漢字編碼方式

參考：MySQL中varchar與char區別博主：叫我大頭一、char 和 varchar 區別 1、定長和變成

JavaScript DOM 程式設計藝術 - 綜合案例（一）

檔案結構 html 程式碼 template.html <!DOCTYPE html> <html lang="en"> <head>

js Dom程式設計動態新增和刪除表格行

js Dom程式設計動態新增和刪除表格行要求：製作一個表格，能夠動態新增和刪除學生資訊

js中innerHTML和innerText的用法和區別

目錄一、innerHTML二、 innerText三、設定元素文字內容直接以字串的形式建立標籤

【JavaScript】原生js中DOM操作之元素建立、插入和移除

技術標籤：JS例項javascriptjs 建立元素 <body> <input type="text" id="txt1">

Java併發程式設計非同步操作Future和FutureTask

碼農在囧途生活是一個洗禮自己的過程，這個洗禮並不是傳統意義上的洗禮，傳統意義上的洗禮通常認為這個人的思想得到洗禮，靈魂得到洗禮，十分的清新脫俗，不世故，不圓滑，而現實的洗禮實則是讓一個人褪去幼稚，褪

Redis的使用--基本資料型別的操作命令和應用場景

echo編輯整理，歡迎轉載，轉載請宣告文章來源。歡迎新增echo微信(微訊號：t2421499075)交流學習。百戰不敗，依不自稱常勝，百敗不頹，依能奮力前行。——這才是真正的堪稱強大！！！

Python操作redis和mongoDB的方法

一、操作redis redis是一個key-value儲存系統，value的型別包括string(字串)，list(連結串列)，set(集合)，zset(有序集合)，hash(雜湊型別)。為了保證效率，資料都是緩衝在記憶體中，在處理大規模資料讀寫的場景下運

java GUI程式設計之監聽操作例項分析

本文例項講述了java GUI程式設計之監聽操作。分享給大家供大家參考，具體如下：

java GUI程式設計之paint繪製操作示例

本文例項講述了java GUI程式設計之paint繪製操作。分享給大家供大家參考，具體如下：

php使用redis的幾種常見操作方式和用法示例

本文例項講述了php使用redis的幾種常見操作方式和用法。分享給大家供大家參考，具體如下：

Python讀寫操作csv和excle檔案程式碼例項

1、python讀寫csv檔案 import csv #讀取csv檔案內容方法1 csv_file = csv.reader(open(\'testdata.csv\',\'r\'))

Python面向物件程式設計之類和物件、例項變數、類變數用法分析

本文例項講述了Python面向物件程式設計之類和物件、例項變數、類變數用法。分享給大家供大家參考，具體如下：