PyScript-在HTML裡添加標籤div

上一篇文章介紹了簡單Pyscript的環境設置和文字輸出，這一篇一樣是簡單!基礎!實用!的介紹如何在<Py-script>裡建立div標籤到HTML中。希望有幫助到各位開發者們。

不廢話，直接上程式碼:

<body><div id="target"><p>這裡是第一個div區塊，Hello!World.</p>
</div><py-script>
div1 = document.createElement("div")
div1.style.margin = "40px"
div1.innerHTML = "這裡是新建的第2個div區塊!"
div1.innerHTML += '&lt;br&gt;首先這裡要複習一下，&lt;br&gt;& lt;代表的是 < 符號(&和lt;之間沒有空格喔!在打時要注意，這裡只是做示範)，&lt;br&gt;& gt;代表的是 > 符號。(&和gt;之間沒有空格喔!在打時要注意，這裡只是做示範)&lt;br&gt;因此一般我們打換行符號的時候都是打&lt;br&gt;<&lt;br&gt;br&lt;br&gt;>&lt;br&gt;'
div1.innerHTML += '而在py-script裡面則是要打: & lt; br & gt;(請自行將空格去掉!)這樣子。'element = document.getElementById("target") <!--指定某個節點。 -->
element.appendChild(div1) <!--向節點添加一個新段落。 -->
x = 0
</py-script><div><p>最後，就是將我們寫好的區塊塞到指定的節點裡。<br>document.getElementById(): 指定某個節點。<br>appendchild(): 向節點裡添加一個新的段落。<br></p><p>最後，不清楚什麼原因，網頁最後面可能會跳出無關緊要的東西。因此在pyscript的最後，多加了一個x = 0來預防。</p></div></body>

輸出頁面:

還需要一行行做介紹嗎?我想應該不用了吧，輸出頁面的圖片上我寫得很清楚了，這裡就不再重複同樣的文字了。

希望有幫助到各位開發者們。下次再見囉。

PyScript-在HTML裡添加標籤div相关推荐

java中break，continue，標籤實現goto效果（編程思想）
goto 編程語言中一開始就有goto關鍵詞了.事實上,goto起源於彙編語言的進程控制:"若條件A成立,則調到這裏:否則跳到那裏". goto語句時在源碼級別上的跳轉,這導致了其 ...
vue -V 执行失败檔案名稱、目錄名稱或磁碟區標籤語法錯誤。
vue -V 执行失败提示 :檔案名稱.目錄名稱或磁碟區標籤語法錯誤. 安装 @Vue/cli 流程 yarn global add @vue/cli yarn global v1.22.10 [1 ...
JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. ...
Html怎样往div中添加文本,给div中添加文本元素
[javascript]代码库给div中添加文本元素 div{ border: 1px solid blue; background-color: green; width: 300px; heig ...
css如何制作横幅,如何在CSS中添加顶级横幅而无需触摸或添加任何HTML div？
我想在网站顶部添加横幅,但完全不接触HTML文件. 这里是横幅的CSS代码:如何在CSS中添加顶级横幅而无需触摸或添加任何HTML div? position: absolute; top: 0px; ...
每次点击添加css动画,div点击添加css动画
div点击添加css动画 }#big_div{width:100%;height:100%;background-color:#00FF00; }.small_div{width:100%;heigh ...
点击按钮追加html代码,vue中如何点击按钮动态添加多个div，并给这些div附加上双击事件或者鼠标右击事件...
可以试试另一种方法,隐式创建Vue实例,比较适合封装成函数进行调用要挂载在到#app1的根实例: new Vue({ el: '#app1', template: ` 创建一个div `, meth ...
div添加html链接,DIV添加超链接小记
接上篇,已经实现了上面是纯文字"图片"下面是文字的效果,但是有个问题是"图片"没有超链接,点击没反应,体验不太好,于是想着把"图片"(实际是 ...
html怎么关闭组合页面,html - 向HTML页面添加内部包装div [关闭] - 堆栈内存溢出
这实际上非常简单,仅几行CSS代码: div{ width:60%; margin-right:auto; margin-left:auto; background-color:red; } 这是根据 ...

PyScript-在HTML裡添加標籤div

PyScript-在HTML裡添加標籤div相关推荐

最新文章

热门文章