堆棧內存溢出
  簡體   English   中英

如您所見，我正在嘗試創建鏈接元素？

[英]As you can see I am trying to create a link elements?

 原文  2020-10-30 14:16:06  8   2    javascript/ html/ css/ web-applications

問題描述

<html>
  <head>
   <link 
 href="css/styles.css" 
 rel="stylesheet">
  </head>
   <body onload="createImg()">

    <h1>My Website</h1>

    <p>This is my first 
website</p>
    <div id='working_area' >
  
  
     </div>
 <script>
   function createImg(){

    var  img=document.getElementById("working_area");
img.innerHTML="<a src='https://www.google.com'>google</a>";
 }
 </script>
  </body>
 </html>

所以我想使用這種方法創建一個超鏈接而不是使用創建元素方法為什么？ 因為我想創建一個html編輯器

**有可能嗎？ **

這是結果的圖像。 該鏈接不起作用。 這是我得到的結果

2 個解決方案

解決方案1
 -1 已采納  2020-10-30 14:17:24

使用href屬性，而不是src的a標簽。 

 <html> <head> <link href="css/styles.css" rel="stylesheet"> </head> <body onload="createImg()"> <h1>My Website</h1> <p>This is my first website</p> <div id='working_area' > </div> <script> function createImg(){ var img=document.getElementById("working_area"); img.innerHTML="<a href='https://www.google.com'>google</a>"; } </script> </body> </html>

解決方案2
 -1  2020-10-30 14:31:34

在 HTML 中， <a>標簽定義了一個超鏈接， <href>屬性表示鏈接目的地。 <src>不是它的一部分。

為什么我看不到渲染的<div>元素在這里？</div><div id="text_translate"><p> 我有一個部分 class 創建一個部分。 我正在使用 PizzaMenu class 從 UI 上的 data.json 文件中呈現每個披薩項目。 該代碼對我來說似乎是正確的，應該呈現比薩餅，但事實並非如此。 以下是代碼。<br> 我檢查時得到&lt;div id = "app"&gt;undefined&lt;/div&gt; 。</p><p> 鏈接： <a href="https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p><p> 應用程序.js</p><pre> class App { static pizzaMenu = new pizzaMenu(); static init() { const app = document.getElementById("app"); app.append(this.pizzaMenu.render()); } } App.init();</pre><p> PizzaMenu.js</p><pre> class pizzaMenu extends Section { constructor(title) { super(); this.title = title || "Loading..."; } render() { const pizzaMenuEl = this.createSection(); fetch("./data.json").then((response) =&gt; { console.log("Check 1"); return response.json(); }).then((data) =&gt; { data.pizza.forEach((item) =&gt; { console.log("Check 2"); pizzaMenuEl.innerHTML = ` &lt;div class="shop-item" id = ${item.id} &gt; &lt;span class="shop-item-title"&gt;${item.name}&lt;/span&gt; &lt;span class="shop-item-img"&gt;&lt;/span&gt; &lt;div class="shop-item-details"&gt; &lt;div class = "shop-item-sizes"&gt; &lt;input type="radio" value="100" name="sizes"&gt; &lt;label&gt;Small&lt;/label&gt; &lt;input type="radio" value="200" name="sizes"&gt; &lt;label&gt;Medium&lt;/label&gt; &lt;input type="radio" value="300" name="sizes"&gt; &lt;label&gt;Large&lt;/label&gt; &lt;/div&gt; &lt;span class="shop-item-price"&gt;Rs.${item.price}&lt;/span&gt; &lt;button class="btn btn-primary shop-item-button"&gt;ADD TO CART&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;`; return pizzaMenuEl; }); }); } }</pre><p> 節.js</p><pre> class Section { // Classes must be passed as an array createSection(cssClasses) { const sectionEl = document.createElement("div"); sectionEl.classList.add("row"); if (cssClasses) { for (const cssClass of cssClasses) { sectionEl.classList.add(cssClass); } } return sectionEl; } }</pre><p> 索引.html</p><pre> &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;script src="section.js"&gt;&lt;/script&gt; &lt;script src="pizzaMenu.js"&gt;&lt;/script&gt; &lt;script src="app.js"&gt;&lt;/script&gt; &lt;/body&gt;</pre><p> 數據.json</p><pre> { "pizza": [ { "id": 1, "name": "Tandoori Pizza", "image": "Images/pizza.png", "price": "Rs.200", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } }, { "id": 2, "name": "Veggie Supreme", "image": "Images/pizza.png", "price": "Rs.250", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } } }</pre></div>

[英]Why am I unable to see the rendered <div> elements here?

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我正在嘗試記錄提交按鈕表單的元素，但在控制台瀏覽器中看不到任何內容 我正在嘗試創建一個可以調整大小和移動的表 我正在嘗試使鏈接彈出JavaScript 我正在嘗試使用用戶通過JavaScript警報框輸入的信息在HTML頁面上創建鏈接 你能指導我一個問題嗎，我每次按下按鈕時都會嘗試更改顏色 為什么我看不到渲染的<div>元素在這里？</div><div id="text_translate"><p> 我有一個部分 class 創建一個部分。 我正在使用 PizzaMenu class 從 UI 上的 data.json 文件中呈現每個披薩項目。 該代碼對我來說似乎是正確的，應該呈現比薩餅，但事實並非如此。 以下是代碼。<br> 我檢查時得到&lt;div id = "app"&gt;undefined&lt;/div&gt; 。</p><p> 鏈接： <a href="https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p><p> 應用程序.js</p><pre> class App { static pizzaMenu = new pizzaMenu(); static init() { const app = document.getElementById("app"); app.append(this.pizzaMenu.render()); } } App.init();</pre><p> PizzaMenu.js</p><pre> class pizzaMenu extends Section { constructor(title) { super(); this.title = title || "Loading..."; } render() { const pizzaMenuEl = this.createSection(); fetch("./data.json").then((response) =&gt; { console.log("Check 1"); return response.json(); }).then((data) =&gt; { data.pizza.forEach((item) =&gt; { console.log("Check 2"); pizzaMenuEl.innerHTML = ` &lt;div class="shop-item" id = ${item.id} &gt; &lt;span class="shop-item-title"&gt;${item.name}&lt;/span&gt; &lt;span class="shop-item-img"&gt;&lt;/span&gt; &lt;div class="shop-item-details"&gt; &lt;div class = "shop-item-sizes"&gt; &lt;input type="radio" value="100" name="sizes"&gt; &lt;label&gt;Small&lt;/label&gt; &lt;input type="radio" value="200" name="sizes"&gt; &lt;label&gt;Medium&lt;/label&gt; &lt;input type="radio" value="300" name="sizes"&gt; &lt;label&gt;Large&lt;/label&gt; &lt;/div&gt; &lt;span class="shop-item-price"&gt;Rs.${item.price}&lt;/span&gt; &lt;button class="btn btn-primary shop-item-button"&gt;ADD TO CART&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;`; return pizzaMenuEl; }); }); } }</pre><p> 節.js</p><pre> class Section { // Classes must be passed as an array createSection(cssClasses) { const sectionEl = document.createElement("div"); sectionEl.classList.add("row"); if (cssClasses) { for (const cssClass of cssClasses) { sectionEl.classList.add(cssClass); } } return sectionEl; } }</pre><p> 索引.html</p><pre> &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;script src="section.js"&gt;&lt;/script&gt; &lt;script src="pizzaMenu.js"&gt;&lt;/script&gt; &lt;script src="app.js"&gt;&lt;/script&gt; &lt;/body&gt;</pre><p> 數據.json</p><pre> { "pizza": [ { "id": 1, "name": "Tandoori Pizza", "image": "Images/pizza.png", "price": "Rs.200", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } }, { "id": 2, "name": "Veggie Supreme", "image": "Images/pizza.png", "price": "Rs.250", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } } }</pre></div> 我正在嘗試執行此Facebook API，但無法正常工作……您可以提出任何更正建議嗎 試着看看我是否可以使星星動起來 我的代碼中出現此錯誤-&gt;未捕獲錯誤：不變失敗：您不應該使用<Link>外面<Router> ，有人可以看到問題嗎？ 我正在嘗試創建帶有框架的JSP頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM