JavaScriptを使用してHTMLタグを作成する方法 -- javascript フィールド と html フィールド と css フィールド と dom フィールド と canvas フィールド 関連 問題

How can I create HTML tags using Javascript?












0
vote

問題

日本語

私は複数のファイルでそれを使用することになるので、JavaScriptを使って作成したいこのコードを持っています。 私は:CSSとの後に使うことについて考えましたが、それはうまくいきませんでした。 それから私はDOM操作を使ってHTMLタグを作成することを考えましたが、私はそれを完了できませんでした。

誰かが私を助けてくれる?

以下の画像は、私が達成しようとしているものを示しています

  1. メインDIVタグ
  2. メインDIVタグ内のDIVタグ
  3. JavaScriptを使用して作成したいDIVタグ
  4. 画像の説明ここで

    事前にありがとう、

    お手伝いのために誰もがありがとう。これが私があなたの回答から得たものです

    <事前> <コード> list0
英語

I have this code that I want to create using JavaScript since I will be using it in more than one file. I thought about using :after with CSS but it didn't work. Then I thought about using the DOM manipulation to create the HTML tags but I couldn't get it done.

can anyone help me?

The image below illustrate what I am trying to accomplish

  1. the main div tag
  2. the div tag inside main div tag
  3. the div tags I want to create using JavaScript

enter image description here

Thanks in advance,

Thanks everybody for the help. Here is what I got from your response

//CREATE MENU DIVs      const mainbody = document.querySelector('body') //or target div      const divbtn = document.createElement('div');     divbtn.setAttribute('id','btn');      const img = document.createElement('img');     img.setAttribute('src', 'https://thiagoprado.com/demo/learning/overlay-menu.png');     img.setAttribute('id','menu');     img.style.display = "block";      const img2 = document.createElement('img');     img2.setAttribute('src', 'https://thiagoprado.com/demo/learning/close-menu.png');     img2.setAttribute('id','x');     img2.style.display = "none";      divbtn.appendChild(img);     divbtn.appendChild(img2);     //canvasDIV.appendChild(div);     document.getElementById("c2canvasdiv").appendChild(divbtn);       // second main DIV      const divbox = document.createElement('div');     divbox.setAttribute('id','box');      const divItems = document.createElement('div');     divItems.setAttribute('id','items');      const divItem = document.createElement('div');     divItem.setAttribute('class','item');      const divItem2 = document.createElement('div');     divItem2.setAttribute('class','item');     //divItem2.setAttribute('id','item2');      const link1 = document.createElement('a');     link1.setAttribute('href','https://thiagoprado.com/demo/learning/');      const img3 = document.createElement('img');     img3.setAttribute('src', 'https://thiagoprado.com/demo/learning/home-60x60.png');       const link2 = document.createElement('a');     link2.setAttribute('href','#');      const img4 = document.createElement('img');     img4.setAttribute('src', 'https://thiagoprado.com/demo/learning/logo-60x60.png');      divbox.appendChild(divItems);     divItems.appendChild(divItem);     divItem.appendChild(link1);     link1.appendChild(img3);      divItems.appendChild(divItem2);     divItem2.appendChild(link2);     link2.appendChild(img4);              document.getElementById("c2canvasdiv").appendChild(divbox); 
</div
              
     
     

回答リスト

0
 
vote
vote
ベストアンサー
 

これはあなたが探しているJavaScriptです。 JSを介して要素を作成するのは小さい例。これを読むことによって。あなたはあなたが欲しいものを達成することができるはずです。

<事前> <コード> const root = document.querySelector('body') //or target div const div = document.createElement('div'); div.innerHTML = "text for div"; const img = document.createElement('img'); img.setAttribute('src', 'urlString'); div.setAttribute('id','box'); div.appendChild(img); root.appendChild(div);
 

here is the javascript you are looking for. a small example of creating elements via js. by reading this. you should be able to accomplish what you want.

const root = document.querySelector('body') //or target div const div = document.createElement('div'); div.innerHTML = "text for div"; const img = document.createElement('img'); img.setAttribute('src', 'urlString'); div.setAttribute('id','box');  div.appendChild(img); root.appendChild(div);  
</div
 
 
         
         
0
 
vote

Document.CreateElementを使用し、InnerHtmlとIDを割り当て、最後にノードを親要素に追加します。

https://www.w3schools.com/jsref/met_document_createlement.asp

 

Use document.createElement, assign with innerHTML and ID and finally append node to parent element.

https://www.w3schools.com/JSREF/met_document_createelement.asp

</div
 
 
0
 
vote

動的HTML

JavaScriptを介したManipulationは、動的コンテンツを生成するための最新の方法ですが、非常に冗長であり、したがって読みやすく、維持し、そしてバグを解放するのが難しいです。

コードを書くときは、コードを d.r.y。

あなたのコード例には42行、12のTEMP変数があります。一目でそれを見て、それはあなたが創造している構造に手がかりを与えません。そして、あなたが月に戻って変更を加えるならば、それは多くの仕事です。

  • 関数を使用して繰り返しタスクを実行する
  • あなたがあなたのデータをどのように構造化するかについて考えてくださいそれで情報を抽出するのが簡単です。
  • 悪い符号化習慣を避けてください。

乾燥原理を用いる

  • 一般的なタスクの3つの機能を作成する
  • URLベースの変数に格納する(長文字列に入るときの断面の偶然の回避)
  • コードを反映しているようなコードの構造

結果は時間が短いほど品質の規格を超えています。

以下は、コード例とまったく同じです。

<事前> <コード> const url = "https://thiagoprado.com/demo/learning/"; const element = (tag, props = {}) => Object.assign(document.createElement(tag), props); const append = (par, ...sibs) => sibs.reduce((p, sib) => (p.appendChild(sib), p), par); const queryEl = (qStr, el = document) => el.querySelector(qStr); append(queryEl("#c2canvasdiv"), append(element("div", {id: "btn"}), element("img", {id: "menuEl", src: url + "overlay-menu.png", className: "block"}), element("img", {id: "closeEl", src: url + "close-menu.png", className: "hide"}), ), append(element("div", {id: "box"}), append(element("div", {id: "items"}), append(element("div", {className: "item"}), append(element("a", {href: url}), element("img", {src: url + "home-60x60.png"})) ) ), append(element("div", {className: "item"}), append(element("a", {href: "#"}), element("img", {src: url + "logo-60x60.png"})) ) ) );

OHとCSS規則は、ライニングスタイルとしての規則が非常に悪い習慣です

<事前> <コード> .hide {display: none} .block {display: block}

p.sは

を必要としない場合は<コード> setAttribute を使用しないでください。
 

Dynamic HTML

DOM manipulation via javascript is the quickest way to generate dynamic content, however it can be exceedingly verbose and thus hard to read, maintain, and keep free of bugs.

When you write code you should always be thinking about keeping the code D.R.Y.

Your code example has 42 lines, 12 temp variables. Looking at it in a glance it gives no clue to the structure you are creating. And what if there is a design changes, that's a lot of work if you come back in a month and make changes.

  • Use functions to do repetitive tasks
  • Think about how you can structure you data so its easy to extract information from it.
  • Avoid bad coding habits.

Example

Using DRY principles

  • Creating 3 functions for common tasks create, append and query,
  • Storing the url base in a variable (avoiding chance of typo when entering long strings)
  • Structuring the code such that it reflect what it is creating

The result is more code of better quality in less time.

The following does exactly the same as you code example.

const url = "https://thiagoprado.com/demo/learning/"; const element = (tag, props = {}) => Object.assign(document.createElement(tag), props); const append = (par, ...sibs) => sibs.reduce((p, sib) => (p.appendChild(sib), p), par); const queryEl = (qStr, el = document) => el.querySelector(qStr);  append(queryEl("#c2canvasdiv"),   append(element("div", {id: "btn"}),     element("img", {id: "menuEl", src: url + "overlay-menu.png", className: "block"}),     element("img", {id: "closeEl", src: url + "close-menu.png", className: "hide"}),   ),   append(element("div", {id: "box"}),     append(element("div", {id: "items"}),       append(element("div", {className: "item"}),         append(element("a", {href: url}), element("img", {src: url + "home-60x60.png"}))       )     ),     append(element("div", {className: "item"}),       append(element("a", {href: "#"}), element("img", {src: url + "logo-60x60.png"}))     )   ) ); 

Oh and CSS rules as in-lining styles are a very bad habit

.hide {display: none} .block {display: block} 

P.S don't use setAttribute if you don't need to

</div
 
 
 
 

関連する質問

0  キャンバスのキーダウンの検出への問題  ( Trouble detecting keydown on canvas ) 
キー入力キーのキー入力を検出することはできません。 私は試してみました: キャンバスにタブインデックスを追加する マウスがキャンバスの上を移動している間にフォーカスを追加するためのマウスオーバーリスナー キーダウンルーチンにcanvas.focus()を追加...

7  CANVASを仮想化するWPF  ( Wpf virtualizing a canvas ) 
キャンバスの内側に発生する一連の長方形を持っており、この注文のスクロールビュー&gt; Canvas&Gt; VirtualizingStackpanel&gt; xamlの長方形 Senarios仮想化がサポートされているものの下にマイクロソフトに関する情...

1  Fabric JSオブジェクトのアライメントが予想通りうまく機能しません  ( Fabric js object alignment not working as expected ) 
グループ内のオブジェクトを揃えようとしました。最初のオブジェクトを左、中央または右に揃えたとき、私は2番目のオブジェクトを試してみました、最初のオブジェクトはそれ自体で移動しました! 下の画像(GIF)を見てください。 ファブリックJS Object Alig...

0  Stream Base64 Image - IMG対キャンバスタグ  ( Stream base64 image img vs canvas tags ) 
サーバからクライアントへのWebSocketを介してBase64をストリーミングする必要があります。この場合はIMGまたはCANVAS要素を使用するのに大きな(または任意の)性能差がありますか? 私はこのような類似の質問を探しようとしました: Stream...

12  Gnuplot:キャンバスサイズ  ( Gnuplot canvas size ) 
Gnuplotを使ってデータをプロットするときは、右枠が遮断されたことを経験しているので、最後のX値は完全に見えていません。 キャンバスを大きくするにはどうすればよいですか? ...

3  新しいキャンバスHTML要素がどのように機能するかについてのいくつかの良い情報が見つかりますか?  ( Where can i find some good information about how the new canvas html element wor ) 
HTML5の新しいCANVAS要素の素晴らしいものがどのくらいの素晴らしいかを読み続け、JavaScriptとFlash No No Flashを使用して完成した素晴らしいデモを表示しています。私はあなた自身のこれらのことのいくつかの方法についていくつかの良...

2  WPFのPhotoshopのような高速描画キャンバスを作る  ( Making fast drawing canvas like photoshop in wpf ) 
私は私の今後のプロジェクトのためにWPFでより速いキャンバスを書かなければなりません。キャンバスはAdobe Photoshop Canvasに似ています。レイヤーやオブジェクトを持つべきであり、また直接描画方法があります。 私は、キャンバスをVC ++または...

1  適用方法はキャンバスのコンテキストlineto()で動作しません  ( Apply method doesnt work on canvas context lineto ) 
これが機能しない理由が見つからない: <事前> <コード> var c=document.getElementById("myCanvas"), ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo.apply...

4  キャンバスクリッピングレッド - 右/下端を包む?  ( Canvas clipping rect right bottom edge inclusive ) 
Androidの描画面を表すキャンバスクラスがあります。クリッピングレースがあります。質問 - 直切の右下と絶対的な罫線は絶対的なものですか?言い換えれば、四角形が(0,0) - (10,10)の場合、キャンバスは座標10のピクセル単位で描画を許可するのでし...

33  HTMLキャンバスユニットテスト  ( Html canvas unit testing ) 
HTMLキャンバスを描画するJavaScriptを単位テストできますか?キャンバスの描画を確認する必要があります。 ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有