HTMLの編集またはページへの挿入

このトピックは、JavaScriptおよびHTMLの知識がある開発者を対象としています。

新しい機能を追加する場合やサイトの重要な領域を再設計する場合、テスト・ページで新しいHTMLを挿入したり、既存のHTMLを編集できます。

カスタムHTMLを追加する手順は、次のとおりです。

  1. 編集モードで、ページ上の要素を選択します。
  2. コード・エディタを開き、「Edit HTML」タブに移動します。
  3. リストから次のいずれかの編集タイプを選択します。
    • 選択した要素のinnerHTMLを編集するには、「Replace HTML」を選択します。

      重要: 「Replace HTML」オプションを使用すると、要素のinnerHTMLが、入力した静的HTMLコードに変更されます。要素のinnerHTMLに動的コンテンツやイベント・ハンドラが含まれていた場合は、望ましくない副次的影響が発生する可能性があります。代替手段として、バリアント・コードでJavaScriptを使用すると、より安全に変更を加えることができます。

    • 選択した要素の前にHTMLを追加するには、「Insert Above」を選択します。
    • 選択した要素の後にHTMLを追加するには、「Insert Below」を選択します。
    • 選択した要素にHTMLを追加するには、「Insert Within」を選択します。
  4. コード・エディタで変更を行います
  5. 「Save」をクリックします。

この例では、新しいHTMLおよび<style>タグをコード・エディタに貼り付けて、ページの選択した領域の上に新しいバナーを追加しています。「Outline」パネルを使用して選択を行うこともできます。

さらに学ぶ

バリアント・コードでのJavaScriptの使用